I have a simple page: it is supposed to be a full-screen webpage, so no scrolling. 100vh is all you get. But in <body> there is a flex container that overflows this for some reason, and I just can't get it to behave unless I give .filosoof_container an explicit height like 90% but that's hacky. How do I just make the column wrap flexbox take up all of the remaining vertical space and no more?
CSS:
p {
margin: 0;
}
h1 {
margin: 1em;
color: #cef;
text-align: center;
}
h2 {
color: #e71;
margin-top: 0;
}
html,
body {
height: 100vh;
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
background-color: #555;
display: flex;
flex-flow: column;
}
.header_container {
flex: 0 1 auto;
}
.filosoof_container {
flex: 1 1 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
.filosoof {
border-radius: 2px;
background-color: #fff;
width: 46ch;
margin: 1em;
padding: 1em;
line-height: 1.5em;
word-wrap: break-word;
overflow: hidden;
}
img {
border-radius: 50%;
float: right;
height: 10em;
margin-left: 1em;
}<body>
<div class="header_container">
<h1>Een kleine collectie Griekse filosofen</h1>
</div>
<div class="filosoof_container">
<div class="filosoof">
<img src="http://images.fineartamerica.com/images-medium-large/thales-ancient-greek-philosopher-sheila-terry.jpg">
<h2>Thales van Milesios</h2>
<p>Thales was een soort proto-wetenschapper, hij legde de wereld uit met theorieën en hypothesen in plaats van mythes. Thales dacht dat alles in de wereld voortkwam door één "stof", namelijk water. Daarnaast was thales ook actief bezig in de wiskunde,
zie de Stelling van Thales.</p>
</div>
<div class="filosoof">
<img src="https://1.bp.blogspot.com/_wn9WOwHVdAs/RhpShJCc1qI/AAAAAAAAAAs/G2oD76GEacM/w1200-h630-p-k-no-nu/parmenides33.jpg">
<h2>Permenides</h2>
<p>Hij dacht dat alles bestond uit één groot onveranderend geheel, dat het universum in essentie dus onveranderlijk, tijdloos en uniform was.</p>
</div>
<div class="filosoof">
<img src="https://www.michaelroeleveld.nl/src/media/herakleitos.jpg">
<h2>Herakleitos</h2>
<p>Deze filosoof staat vrijwel haaks op Permenides. Herakleitos dacht dat alles onveranderlijk was, en dat je niet twee keer in dezelfde rivier kon stappen (omdat die veranderd zou zijn in de tussentijd).</p>
</div>
<div class="filosoof">
<img src="http://3.bp.blogspot.com/-4WIMo9hWFOM/Tv3_Hw0c0EI/AAAAAAAAAQk/2chXZSHTamE/s400/democritus-1-sized.jpg">
<h2>Democritus</h2>
Democritus was een atomist, dat wil zeggen hij geloofde dat alles bestond uit (letterlijk ondeelbare) kleine deeltjes, atomen.</p>
</div>
<div class="filosoof">
<img src="https://www.michaelroeleveld.nl/src/media/plato.jpg">
<h2>Plato</h2>
<p>Plato is bekend van de vormenleer. In een notendop: als je twee verschillende stoelen hebt, dan hebben ze alsnog in gemeen dat ze een stoel zijn, dat is de "vorm". Plato stelt dat er een soort bovenliggende wereld is met onder andere deze perfecte
stoel, de vormenwereld. Hij zegt dat filosofen mensen zijn die in deze wereld kunnen kijken, terwijl het gewone volk slechts een projectie ziet, als een silhouet van een 3d voorwerp geprojecteerd op een 2d vlak.</p>
</div>
<div class="filosoof">
<img src="http://4.bp.blogspot.com/-pDYma0MXXfw/VV0fXHyTVHI/AAAAAAAAVoo/W3SDyJr_a2I/s1600/tfguy7u.jpg">
<h2>Socrates</h2>
<p>Socrates' ideeën leven voort door de documentatie van een van zijn leerlingen, Plato. Hij is vooral bekend door de Socratische Methode, het blijven stellen van doorgrondende vragen om bij de kern van een oncept te komen en het te definiëren.</p>
</div>
<div class="filosoof">
<img src="https://www.michaelroeleveld.nl/src/media/pythagoras.jpg">
<h2>Pythagoras</h2>
<p>Pythagoras geloofde dat alles in harmonie was, en bewoog volgens wiskundige expressies. Hij dacht dat mensen bestonden om de hemel te observeren. Hij bedacht een tonale schaal en had een hekel aan bonen. Aan hem hebben we ook de Stelling van Pythagoras
te danken.</p>
</div>
</div>
</body>
