I'm learning CSS flexbox. I have created the mockup shown below. The green box is a flexbox item in a flexbox row layout. I have troubles understanding why that green box does not fill the space all the way to the right of the browser window.
Why is that? I am looking for an explanation not an easy fix (I've tried to find the answer on mdn web docs. I'm sure it's out there somewhere, but I couldn't find it.)
Here is a runnable snippet:
.page { min-height: 100vh;}.flex-row { display: flex;}.flex-col { display: flex; flex-direction: column; -ms-flex-direction: column;}.flex-wrap { flex-wrap: wrap; -ms-flex-wrap: wrap;}.align-items-center { align-items: center;}.m-10 { margin: 10px;}.h-40 { height: 40px;}.h-100 { height: 100px;}.w-100 { width: 100px;}.w-200 { width: 200px;}.w-800 { width: 800px;}.bg-lightblue { background-color: lightblue;}.bg-aqua { background-color: aqua;}.bg-lightgreen { background-color: lightgreen;}.bg-crimson { background-color: crimson;}.bg-lightgray { background-color: lightgray;}.bg-darkgray { background-color: darkgrey;}<body><div class=""><div class="navbar-top h-40 bg-lightgray">Navbar top</div><div class="page flex-row bg-darkgray"><!-- first element in row--><div class="navbar-left w-200 bg-aqua">Navbar left</div><!--second elemen in row (much longer than first)--><div class="content w-800"><div class=" flex-col align-items-center bg-lightgreen"><div class="box bg-lightgray w-100 h-100 m-10">A</div><div class="box bg-lightgray w-100 h-100 m-10">B</div><div class="box bg-lightgray w-100 h-100 m-10">A</div><div class="box bg-lightgray w-100 h-100 m-10">B</div><div class="box bg-lightgray w-100 h-100 m-10">A</div><div class="box bg-lightgray w-100 h-100 m-10">B</div><div class="box bg-lightgray w-100 h-100 m-10">A</div><div class="box bg-lightgray w-100 h-100 m-10">B</div><div class="box bg-lightgray w-100 h-100 m-10">A</div><div class="box bg-lightgray w-100 h-100 m-10">B</div><div class="box bg-lightgray w-100 h-100 m-10">A</div><div class="box bg-lightgray w-100 h-100 m-10">B</div></div></div></div><div class="footer h-40 bg-crimson">footer</div></div></body>