Flexbox children do not respect parent height with direction gradient
The general idea is to have 2 rows of equal heights and the first row contains 2 columns of equal width for the full page layout. The problem I'm running into is that when one of the cells fills the children, the height of the parent row expands, overtaking the adjacent row when the heights are supposed to be equal.
body {
min-height: 100vh;
height: auto;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
}
.row {
border: dashed 1px;
flex: 1;
}
.row1 {
display: flex;
}
.cell {
flex: 1;
padding: 8px;
border: dashed 1px black;
margin: 4px;
display: flex;
flex-direction: column;
}
.title {
border: solid 1px;
padding: 8px;
font-size: 24px;
}
.things {
flex: 1;
margin: 8px 0 0;
padding: 0;
overflow-y: scroll;
}
.things li {
list-style-type: none;
padding: 4px;
border: solid 1px;
margin: 8px 8px 8px;
}
<div class="content">
<div class="row row1">
<div class="cell">
<div class="title">Cell 1</div>
<ul class="things">
<li>thing 1</li>
<li>thing 2</li>
<li>thing 3</li>
<li>thing 4</li>
<li>thign 5</li>
<li>thing 1</li>
<li>thing 2</li>
<li>thing 3</li>
<li>thing 4</li>
<li>thign 5</li>
</ul>
</div>
<div class="cell">
<div class="title">Cell 2</div>
</div>
</div>
<div class="row row2">Row 2</div>
</div>
source to share
Since it flex
is a shorthand property, it flex: 1
means
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
But for some reason 0%
, it seems to be confusing Chrome. So add flex-basis: 0
manually:
.row { flex-basis: 0; }
And since Firefox implements new auto
as a seed value min-height
, it needs
.row { min-height: 0; }
So the final code is
.row {
flex: 1;
flex-basis: 0;
min-height: 0;
}
/* Styles go here */
body {
min-height: 100vh;
height: auto;
display: flex;
flex-direction: column;
}
header {
background: #000;
color: #fff;
display: flex;
justify-content: space-between;
}
a {
color: #fff;
padding: 4px;
text-decoration: none;
}
a:hover {
background: #fff;
color: #000;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
}
.row {
border: dashed 1px;
flex: 1;
flex-basis: 0;
min-height: 0;
}
.row1 {
display: flex;
}
.cell {
flex: 1;
padding: 8px;
border: dashed 1px black;
margin: 4px;
display: flex;
flex-direction: column;
}
.title {
border: solid 1px;
padding: 8px;
font-size: 24px;
}
.things {
flex: 1;
margin: 8px 0 0;
padding: 0;
overflow-y: scroll;
}
.things li {
list-style-type: none;
padding: 4px;
border: solid 1px;
margin: 8px 8px 8px;
}
<header>
<a href="#">Home</a>
<a href="#">Acct</a>
</header>
<div class="content">
<div class="row row1">
<div class="cell">
<div class="title">Cell 1</div>
<ul class="things">
<li>thing 1</li>
<li>thing 2</li>
<li>thing 3</li>
<li>thing 4</li>
<li>thign 5</li>
</ul>
</div>
<div class="cell">
<div class="title">Cell 2</div>
</div>
</div>
<div class="row row2">Row 2</div>
</div>
source to share