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.
Mockup layout
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.)
I have created a codepen with the code: link to codepen, but am posting it here anyway because Stackoverflow tells me to.
Here is the HTML:
<code><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>
</code>
<code><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>
</code>
<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>
Here is the CSS:
<code>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;
}
</code>
<code>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;
}
</code>
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;
}
New contributor
Sebastian is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.