css - Flexbox 子项不尊重具有 flex-direction 列的父项的高度

Question

一般的想法是让 2 行等高，第一行包含 2 等宽的列以实现完整的页面布局。我遇到的问题是，当其中一个单元格充满子元素时，父行的高度会扩展并超过兄弟行，而此时高度应该相等。

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

由于flex是一个简写属性，flex: 1表示

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

但出于某种原因，0% 似乎让 Chrome 感到困惑。所以手动添加flex-basis: 0:

.row { flex-basis: 0; }

并且由于 Firefox 实现了新的 auto 作为 min-height 的初始值，它需要

.row { min-height: 0; }

所以最后的代码是

.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>