React.jsコンポーネント内で使用できない空き領域を埋めるためのFlexbox

Question

this exampleに基づいて、ヘッダーとフッターの間に展開されるコンテンツを持つ単純なフレックスボックスレイアウトを設定しようとしています。適切なHTMLをページテンプレートに直接配置するとうまくいきますが、Reactコンポーネント内で全く同じHTMLをレンダリングすると失敗します。

<div class="box"> 
    <div class="header"> 
    <p><b>header</b></p> 
    </div> 
    <div class="content"> 
    <p> 
     <b>content</b> 
     (fills remaining space) 
    </p> 
    </div> 
    <div class="footer"> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div> 

マイstyle.cssは、すべてのケースでこれを次のとおりです：静的なHTMLを務めたときに素晴らしい作品

html, body { 
    height: 100%; 
} 

.box { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 

.header { 
    flex: 0 1 auto; 
} 

.content { 
    flex: 1 1 auto; 
} 

.footer { 
    flex: 0 1 40px; 
} 

はここで単純なHTMLです。私は、単一のrootのdivでちょうど空のページを提供し、このHTML使用リアクトと同じことをレンダリングする場合、私は同じことを取得する必要があります。

<div id="root"> 
</div> 

を、これはJS：

class Boxes extends React.Component { 

    render() { 
    return (
     <div className="box"> 
     <div className="header"> 
      <p><b>header</b></p> 
     </div> 
     <div className="content"> 
      <p> 
      <b>content</b> 
      (fills remaining space) 
      </p> 
     </div> 
     <div className="footer"> 
      <p><b>footer</b> (fixed height)</p> 
     </div> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    React.createElement(Boxes, null), 
    document.getElementById('root') 
); 

しかしセンター「コンテンツ」ペインは、Reactでレンダリングするときに、利用可能な垂直スペースをいっぱいにしません。代わりに、コンテンツのサイズに合わせます。

これはChrome/MacのReact 15.4.2にあります。

Answer 1

問題は、あなたにCSSがないラッパー<div id="root">があることです。あなたはルートが完全な高さに展開させる必要があり、その後、内側のdivが同様に展開されます：

#root { 
    height: 100%; 
} 

Answer 2

をあなたは試すことができます：{高さ：100VH}