Flexbox для заповнення вільного простору, що не працює в компоненті React.js - реагує, flexbox

Я намагаюся створити простий макет flexbox з вмістом, який розширюється на основі колонтитулів цей приклад. Він відмінно працює, коли я розміщую відповідний HTML-код безпосередньо в шаблоні сторінки, але не вдається, коли я роблю той самий 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, 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 та візуалізувати те ж саме з React за допомогою цього 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. Замість цього він просто розміри до змісту.

Це з React 15.4.2 на Chrome / Mac.

Відповіді:

Проблема в тому, що у вас є обгортка <div id="root"> який не має жодної css. Ви повинні зробити кореневу корекцію до повної висоти, а потім divs всередині буде розширено також:

#root {
height: 100%;
}

Ви можете спробувати: {height: 100vh}