html - 如何让 flexbox 底部元素的内容达到其容器高度的 100%

Question

如果我制作一个有 2 个子项和列流的 flexbox，并将第二个子项设置为 flex-grow 1，第二个子项将扩展以填充 flexbox。这行得通

(ps:不想让 safari 支持的示例变得困惑，所以请使用 Chrome 或 Firefox)

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">bottom (blue)</div>
</div>
  

但是，如果我随后将一个 child #inside 放入 #bottom 并将其高度设置为 100%，即使 flexbox 也不会增加其高度以匹配拉伸(stretch)了#bottom。

添加了CSS

#inside {
  background-color: green;
  height: 100%;
}

html

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside</div>  <!- added ->
  </div>
</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}
#inside {
  background-color: green;
  height: 100%;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (green)</div>
  </div>
</div>

所以我将 height: 100% 添加到 #bottom 但现在 bottom 和 #outer 一样大而不是 flex 拉伸(stretch)大小.

#bottom {
  background-color: blue;
  flex: 1 0 auto;
  height: 100%;   /* added */
} 

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
  height: 100%;
}
#inside {
  background-color: green;
  height: 100%;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (green) (would not scroll if working)</div>
  </div>
</div>

我如何让 #bottom 拉伸(stretch)以适应 flexbox 并让子 #inside 成为其容器 #bottom 的 100% 高度?

Answer 1

Flex 有一个怪癖，您需要将高度设置为 0。

将 #bottom 规则的高度属性更改为此 height: 0;

为了使 inside 正常工作，我将其更改为“position: absolute”，并在 bottom 中添加了一个 position:relative/p>

更新

如果你不想使用绝对位置，你可以像这样设置这 2 个 css 规则:

(但请注意，如果像第一个一样使用新的内部 div，这会传播原始问题)

#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
  display: flex;
}
#inside {
  background-color: green;
  flex: 1 0 auto;
}

示例使用“position: absolute”

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
}
#inside {
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (would not scroll if working)</div>
  </div>
</div>