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>

- user1203349

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>

- Oriol

---

7年后仍然有用。在Chrome中，添加min-height: 0解决了我的问题。 - Som-1

8年过去了，仍然有用的：祈祷： - Marco Arruda