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 将 new 实现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>