Flexbox列中的flexbox行

Question

我有一个这样的布局：

<div class="flexbox">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>

以及它的css：

html,
body {
  height: 100%;
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
.flexbox .main {
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}
.flexbox .header,
.flexbox .footer {
  order: 0;
  flex: 0 1 auto;
  align-self: stretch;
}

在上面的.main列中拉伸了100%的height，所有这些都很完美，现在在.main中添加.flexbox-row

<div class="flexbox">
  <div class="header"></div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first"></div>
      <div class="second"></div>
      <div class="third"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>

和css：

.flexbox-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
  order: 0;
  flex: 0 1 auto;
  align-self: stretch;
}
.flexbox-row .second {
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}

但是由于某些原因，在height中第二个列不能100%伸展。

这是jsbin演示

Answer 1

向.flexbox-row添加height:100%

我简化了你的规则，那里有一些不必要的属性。

​

html,
body {
  height: 100%;
  margin: 0
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
}
.flexbox .main {
  flex: 1;
  background: red
}
.flexbox .header,
.flexbox .footer {
  background: green;
  padding:1em
}
.flexbox-row {
  display: flex;
  height: 100%;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
  background: #C9E1F4;
  padding: 1em;
}
.flexbox-row .second {
  flex: 1;
  background: #A8EDAC
}

<div class="flexbox">
  <div class="header">Header</div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first">First</div>
      <div class="second">Main</div>
      <div class="third">Third</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

​

更新

在Chrome和Safari中，(非flex)儿童的身高不能以百分比的形式识别。然而，Firefox和IE会根据百分比高度识别和缩放孩子。

Source

因此，解决方法是将.position:relative添加到.main和position:absolute中，将width/height:100%添加到.flexbox-row中

​

html,
body {
  height: 100%;
  margin: 0
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%
}
.flexbox .main {
  flex: 1;
  background: red;
  position: relative
}
.flexbox .header,
.flexbox .footer {
  background: green;
  padding: 1em
}
.flexbox-row {
  display: flex;
  position:absolute;
  height: 100%;
  width: 100%
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
  background: #C9E1F4;
  padding: 1em;
}
.flexbox-row .second {
  flex: 1;
  background: #A8EDAC
}

<div class="flexbox">
  <div class="header">Header</div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first">First</div>
      <div class="second">Main</div>
      <div class="third">Third</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

​