FLEXBOX：div 的自动高度以垂直填充父级

Question

我有一些需要注意的 Flexbox 标记。

除了最后一件事，一切都按预期工作。我在列布局中有一些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>

Answer 1

如果列布局不在另一个 flex 布局中，它不会向下伸展。

考虑这些变化：

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

Answer 2

将黄色 div 的祖父级设为 flex 容器，使align-items: stretch 生效，这会导致 flex 项（包括黄色 div 的父级）扩展容器的整个高度。

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

黄色 div 已经填充了剩余空间（其容器）。高度受限的是父级 (.flexbox2)（在其容器内）。

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

Answer 3

你的 flexbox 父级没有占据整个高度：

.flexbox2 { 
    height: 100%; 
}

黄色的 flexbox 应该会变大：

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

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