シンプルにするとこれで #content の高さ 100% が効かない
<!doctype html>
<style>
body {
margin: 0;
}
#root {
width: 100vw;
height: 100vh;
}
#flex-host {
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
}
#flex-item {
flex-grow: 1;
}
#content {
width: 100%;
height: 100%;
background: palegoldenrod;
}
</style>
<div id="root">
<div id="flex-host">
<section id="flex-item">
<div id="content">text</div>
</section>
</div>
</div>
#flex-item はウィンドウ全体のサイズになってるけど
#content は 「text」 の文字分の高さだけになってる
100% にするには #flex-item に height を適当に指定すればいい
grow で広がるからとりあえず height: 0 でも大丈夫
たぶん Chrome のバグで Firefox だと height 入れなくても 100% になってる
