Flexbox子项不考虑具有flex-direction列的父级的高度

Question

一般的想法是有两行相等的高度，第一行包含两列宽度相等的整列布局。我遇到的问题是，当其中一个单元格填满子元素时，当高度应该相等时，父行的高度会超过兄弟行。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;