我有一个反应应用程序，其布局如下所述：
Nested flexbox with 100% height and scrollbar on element (not browser)
假设我们从@ michael-b继续这个实现：
http://jsfiddle.net/ch7n6/911/
附加功能是我有按钮切换某些Flexbox是否在DOM中 .
例如我的react组件有渲染逻辑，如下所示：
{ 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 }
我有一些按钮可以切换showBoxA，showBoxB和showBoxC的值，以便相关元素隐藏或显示 .
如果我隐藏然后显示部分＃容器，文章＃内容的高度被搞砸了，它不再是部分＃容器高度的100％ . 它的高度下降到0.如果我在文章＃内容中设置了一个高度属性，它就会变成那个高度而不是重新计算 .
这是正常的反应/ CSS行为吗？我需要做什么，如果我切换部分＃容器部分＃容器的高度按预期呈现？