如何将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>
  

但是,如果我然后将一个孩子#inside放在里面#bottom并将其高度设置为100%,即使Flexbox已拉伸,它也不会增加其高度以匹配#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但现在底部是大#outer而不是flex拉伸尺寸.

#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伸展以适应Flexbox并让孩子#inside的容器高度达到100%#bottom？

Answer 1

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

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

为了inside工作，我将其更改为“位置：绝对”，并position:relative在bottom

更新

如果你不想使用绝对位置，你可以设置这 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;
}

使用“位置：绝对”的示例

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

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