css - Flexbox 代码中控制溢出的意外行为

Question

我正在尝试创建这样的布局:

top div 的高度固定为 100px，bottom div 的高度固定为 50px，中间的 div 使用窗口的可用空间。

代码如下:

html body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.flex-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topRow {
  background-color: gray;
  height: 100px;
  border: 2px solid black;
}

.bottomRow {
  background-color: cadetblue;
  border: 2px solid black;
  height: 50px;
}

.content {
  background-color: orange;
  border: 2px solid black;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="flex-grid">
  <div class="topRow">Top div</div>
  <div class="content">
    <div>
      <p>First column</p>
    </div>
    <div style="display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">
      <p>first row</p>
      <p>2 row</p>
      <p>3 row</p>
      <p>4 row</p>
      <p>5 row</p>
      <p>6 row</p>
      <p>7 row</p>
      <p>8 row</p>
      <p>9 row</p>
      <p>10 row</p>
      <p>11 row</p>
      <p>12 row</p>
      <p>13 row</p>
      <p>14 row</p>
      <p>15 row</p>
      <p>16 row</p>
      <p>17 row</p>
      <p>18 row</p>
      <p>19 row</p>
      <p>20 row</p>
      <p>3-1 row</p>
      <p>3r2 row</p>
      <p>3r3 row</p>
      <p>3r4 row</p>
      <p>3r5 row</p>
      <p>3r6 row</p>
      <p>3r7 row</p>
      <p>last row</p>
    </div>
    <div>
      <p>The last column</p>
    </div>
  </div>
  <div class="bottomRow">Bottom div</div>
</div>

如果我在 Windows 10 x64 的 Chrome(版本 70.0.3538.77(官方构建)(64 位))中运行此代码，它会按我预期的方式运行，但是当我在 Firefox(版本 63.0.1(64 位)中运行它时)(官方版本))在同一个 Windows 10 中无法按预期工作。

这是 Firefox 中的结果:

如您所见，顶部的 div 没有 100 像素的高度，底部的 div 在浏览器窗口之外。白色列也忽略 overflow-y: scroll

任何人都可以告诉我我做错了什么，它在 Firefox 中不起作用吗？

PD:我还在 Firefox 57 中测试了相同的代码，得到的结果与在 Firefox 63.0.1 中的结果相同

Answer 1

flex 收缩

flex 容器的初始设置是 flex-shrink: 1 .这意味着 flex 元素可以收缩以防止容器溢出。您可以使用 flex-shrink: 0 禁用此功能。

.topRow {
   height: 100px;
   flex-shrink: 0;
}

或

.topRow {
   flex: 0 0 100px; /* flex-grow, flex-shrink, flex-basis */
}

有关详细信息，请参阅我的回答中的flex-shrink 因素部分:

• What are the differences between flex-basis and width?

---

最小高度:自动

flex 容器的初始设置是 min-height: auto。这意味着 flex 元素不能小于其内容的高度。要覆盖此设置，请使用 min-height: 0 或 overflow: auto。

.content {
   overflow: auto;
}

有关详细信息，请参阅此帖子:

• Why don't flex items shrink past content size?

要了解为什么您的布局在 Chrome 而不是 Firefox 中有效，请参阅我对上述帖子的回答中的浏览器呈现说明部分。

---

jsFiddle demo

 .flex-grid {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }

 .topRow {
   background-color: gray;
   height: 100px;
   flex-shrink: 0; /* new */
   border: 2px solid black;
 }

 .bottomRow {
   background-color: cadetblue;
   border: 2px solid black;
   /* height: 50px; */
   flex: 0 0 50px; /* new */
 }

 .content {
   background-color: orange;
   border: 2px solid black;
   flex: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   overflow: auto; /* new */
 }

 body {
   margin: 0;
 }

<div class="flex-grid">
  <div class="topRow">Top div</div>
  <div class="content">
    <div>
      <p>First column</p>
    </div>
    <div style="display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">
      <p>first row</p>
      <p>2 row</p>
      <p>3 row</p>
      <p>4 row</p>
      <p>5 row</p>
      <p>6 row</p>
      <p>7 row</p>
      <p>8 row</p>
      <p>9 row</p>
      <p>10 row</p>
      <p>11 row</p>
      <p>12 row</p>
      <p>13 row</p>
      <p>14 row</p>
      <p>15 row</p>
      <p>16 row</p>
      <p>17 row</p>
      <p>18 row</p>
      <p>19 row</p>
      <p>20 row</p>
      <p>3-1 row</p>
      <p>3r2 row</p>
      <p>3r3 row</p>
      <p>3r4 row</p>
      <p>3r5 row</p>
      <p>3r6 row</p>
      <p>3r7 row</p>
      <p>last row</p>
    </div>
    <div>
      <p>The last column</p>
    </div>
  </div>
  <div class="bottomRow">Bottom div</div>
</div>