I have a react app with a layout as described here:
Nested flexbox with 100% height and scrollbar on element (not browser)
Assume that we go ahead with this implementation from @michael-b:
http://jsfiddle.net/ch7n6/911/
Additional functionality is that I have buttons that toggle whether or not certain flexboxes are in the DOM or not.
e.g. my react component has render logic that looks like:
{ viewState.showBoxA ? <div id="outer1"></div> : null}
{ viewState.showBoxB ? <section id="container" >
<header id="header" >This is a header</header>
<article id="content" ></article>
</section> : null }
{ viewState.showBoxC ? <div id="outer2"></div> : null }
I have some buttons that toggle the value of showBoxA, showBoxB and showBoxC so that the relevant element either hides or shows.
If I hide and then show section#container the height of article#content gets screwed up and it is no longer 100% the height of section#container. It's height drops to 0. If i set a height property in article#content, it just becomes that height instead of being recalculated.
Is this normal react / CSS behavior? What would i need to do so that if I toggle section#container the height of section#container is rendered as expected?
