Flexbox per riempire lo spazio disponibile non funzionante all'interno del componente React.js - reactjs, flexbox

Sto cercando di creare un semplice layout in flexbox con contenuti che si espandano tra intestazione e piè di pagina, sulla base di questo esempio. Funziona correttamente quando inserisco l'HTML appropriato direttamente nel modello di pagina, ma fallisce quando eseguo il rendering dello stesso codice HTML all'interno di un componente React.

Ecco il semplice 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>

Mio style.css è questo in tutti i casi:

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

Funziona alla grande quando viene usato come HTML statico. Dovrei ottenere la stessa cosa se servo solo una pagina vuota con un singolo root div e rendi la stessa cosa con React usando questo HTML:

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

e questo 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")
);

Ma il riquadro centrale "contenuto" non riempie più lo spazio verticale disponibile quando eseguo il rendering con React. Invece si limita al contenuto.

Questo è con React 15.4.2 su Chrome / Mac.

risposte:

Il problema è che hai un involucro <div id="root"> che non ha css. Dovresti far espandere la root fino alla massima altezza, e quindi anche le div all'interno si espanderanno:

#root {
height: 100%;
}

Puoi provare: {height: 100vh}