Flexbox to fill available space not working inside React.js component - reactjs

Question

I am trying to set up a simple flexbox layout with content that expands between header and footer, based on this example. It works fine when I put the appropriate HTML directly in the page template, but fails when I render the exact same HTML inside a React component.
Here is the plain 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>
My style.css is this in all cases:
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;
}
That works great when served as static HTML. I should get the same thing if I serve just an empty page with a single root div and render the same thing with React using this HTML:
<div id="root">
</div>
and this 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')
);
But the center "content" pane no longer fills the available vertical space when I render with React. Instead it just sizes to the content.
This is with React 15.4.2 on Chrome/Mac.

Answer 1

The problem is you have a wrapper <div id="root"> which doesn't have any css. You should make root expand to the full height, and then the divs inside will expand as well:
#root {
height: 100%;
}

Answer 2

You can try : { height : 100vh}