反应：切换flexbox螺丝高度

Question

我有一个具有如下所述布局的反应应用程序：
Nested flexbox with 100% height and scrollbar on element (not browser)

假设我们从@ michael-b开始实施这个实现：
http://jsfiddle.net/ch7n6/911/

附加功能是我有按钮可以切换某些Flexbox是否在DOM中。

e.g。我的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行为吗？我需要做什么，如果我切换部分＃容器部分＃容器的高度按预期呈现？