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">），您似乎可以避免第一次更改样式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使黄色div的祖父母成为一个弹性容器，以便align-items: stretch生效，这会导致弹性项目（包括黄色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/

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

3 个答案: