Flexbox pour remplir l'espace disponible ne fonctionnant pas dans le composant React.js - reactjs, flexbox

J'essaie de mettre en place une disposition simple en flexbox avec un contenu qui s'étend entre l'en-tête et le pied de page, en fonction de cet exemple. Cela fonctionne bien lorsque je mets le code HTML approprié directement dans le modèle de page, mais échoue lorsque je rends exactement le même code HTML dans un composant React.

Voici le HTML simple:

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

ma style.css est-ce dans tous les cas:

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

Cela fonctionne très bien lorsqu'il est utilisé en HTML statique. Je devrais obtenir la même chose si je sers juste une page vide avec un seul root div et rendre la même chose avec React en utilisant ce HTML:

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

et ce 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")
);

Mais le volet central "contenu" ne remplit plus l’espace vertical disponible lors du rendu avec React. Au lieu de cela, il suffit de dimensionner le contenu.

Ceci est avec React 15.4.2 sur Chrome / Mac.

Réponses:

Le problème est que vous avez un wrapper <div id="root"> qui ne possède aucun css. Vous devriez faire en sorte que root s'étende à la hauteur maximale, puis les divs à l'intérieur se développeront aussi:

#root {
height: 100%;
}

Vous pouvez essayer: {height: 100vh}