Flexbox para llenar el espacio disponible que no funciona dentro del componente React.js - reactjs, flexbox

Estoy tratando de configurar un diseño de flexbox simple con contenido que se expanda entre el encabezado y el pie de página, basado en este ejemplo. Funciona bien cuando coloco el HTML apropiado directamente en la plantilla de la página, pero falla cuando reproduzco exactamente el mismo HTML dentro de un componente React.

Aquí está el HTML plano:

<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>

Mi style.css Es esto en todos los casos:

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;
}

Eso funciona muy bien cuando se sirve como HTML estático. Debería obtener lo mismo si sirvo solo una página vacía con una sola root div y render lo mismo con React usando este HTML:

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

y este 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")
);

Pero el panel central de "contenido" ya no llena el espacio vertical disponible cuando renderizo con React. En su lugar, sólo se ajusta al contenido.

Esto es con React 15.4.2 en Chrome / Mac.

Respuestas

El problema es que tienes un envoltorio. <div id="root"> el cual no tiene ningún css. Debería hacer que la raíz se expanda a la altura completa, y luego los divs en el interior también se expandirán:

#root {
height: 100%;
}

Puedes probar: {altura: 100vh}