FLEXBOX：使div自动填充父元素的垂直高度

Question

我有一些Flexbox标记需要注意。所有的都按预期工作，只有最后一件事没有解决。我有一些以列布局的div，其中两个由内容或高度设置控制，而一个则没有受到控制。这个未受控制的div（在DEMO中为黄色）应该具有这样的高度，以填补其父div（绿色）中剩余的垂直空间。即使使用响应式设计缩放窗口，黄色div也应始终填充至绿色父div的底部。

<div class="flexbox">
  <div class="col">
    <h3>RED</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>

  </div>

  <div class="col">
    <div class="flexbox2">
      <div>
        <h3>GREEN</h3></div>
      <div class="col1">
        Set at responsive height 10 vw.
      </div>
      <div class="col1">
        This div should adapt its height automatically to fill out the remaining space.
      </div>

    </div>

  </div>

<style>
.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flexbox .col {
  flex: 1;
}

.flexbox .col:nth-child(1) {
  background: red;
  order: 0;
  padding: 5px;
}

.flexbox .col:nth-child(2) {
  background: green;
  order: 1;
  padding: 5px;
  color: white;
}

.flexbox2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 5px;
}

.flexbox2 .col1 {
  flex: 1;
}

.flexbox2 .col1:nth-child(2) {
  background: orange;
  height: 10vw;
  padding: 5px;
}

.flexbox2 .col1:nth-child(3) {
  background: yellow;
  padding: 5px;
  color: black;
}

</style>

- Eddy

Answer 1

如果列布局不在另一个弹性布局中，它将不会向下拉伸。

考虑进行以下更改：

.flexbox .col:nth-child(2) {
  display: flex;
  ...
}

.flexbox2 .col1 {
  flex: none;  /* Or omit this style altogether. */
}

.flexbox2 .col1:nth-child(3) {
  flex: 1
  ...
}

通过简化标记，将 .flexbox2 元素合并到其父元素 .col 中（例如：<div class="col flexbox2">），似乎可以避免第一个样式更改。

.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flexbox .col {
  flex: 1;
}

.flexbox .col:nth-child(1) {
  background: red;
  order: 0;
  padding: 5px;
}

.flexbox .col:nth-child(2) {
  background: green;
  order: 1;
  padding: 5px;
  color: white;
  display: flex;
}

.flexbox2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 5px;
}

.flexbox2 .col1 {
  flex: none;
}

.flexbox2 .col1:nth-child(2) {
  background: orange;
  height: 10vw;
  padding: 5px;
}

.flexbox2 .col1:nth-child(3) {
  background: yellow;
  padding: 5px;
  color: black;
  flex: 1
}

<div class="flexbox">
  <div class="col">
    <h3>RED</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>

  </div>

  <div class="col">
    <div class="flexbox2">
      <div>
        <h3>GREEN</h3></div>
      <div class="col1">
        Set at responsive height 10 vw.
      </div>
      <div class="col1">
        This div should adapt its height automatically to fill out the remaining space.
      </div>

    </div>

  </div>

- Nate Whittaker

Answer 2

将黄色div的祖先元素设置为flex容器，这样align-items: stretch就会生效，导致flex项目（包括黄色div的父元素）扩展到容器的全高。

.col:nth-child(2) { display: flex; }

黄色的div已经填满了剩余的空间（在其容器内）。它的父元素（.flexbox2）的高度受到限制（在其容器内）。

如果您希望橙色的div固定为height: 10vw，则需要删除应用的flex：1。

- Michael Benjamin

---

谢谢，Michael。我现在明白了。 - Eddy

Answer 3

你的flexbox父元素没有占满整个高度：

.flexbox2 { 
    height: 100%; 
}

黄色的 Flexbox 应该增长：

.flexbox .col:nth-child(3) { 
    flex-grow: 1; 
}

https://jsfiddle.net/by4v1ahd/12/

- c2huc2hu

---

谢谢，我看到你的 DEMO 有变化，但不是一个好的变化。现在红色和绿色的 div 不再等宽了，而我想要的并没有发生。黄色的 div 仍然没有向下扩展到底部。 - Eddy

@Eddy，我在那里多了一行。现在已经修复了，所以红色和绿色现在具有相等的宽度。对于我来说，黄色div延伸到底部。 - c2huc2hu

谢谢，但是黄色div仍然没有被拉伸的效果可见。 - Eddy