Flexbox children does not respect height of parent with flex-direction column - css

Question

The general idea is to have 2 rows of equal heights and the first row contain 2 columns of equal width for a full page layout. The problem I'm running into is that when one of the cells fill up with children elements, the parent row's height expands overtaking the sibling row when the heights should 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>

Answer 1

Since flex is a shorthand property, flex: 1 means
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
But for some reason, the 0% seems to confuse Chrome. So add flex-basis: 0 manually:
.row { flex-basis: 0; }
And since Firefox implements the new auto as the initial value of 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>
Home
Acct
</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>