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,这一切都很完美,现在添加.flexbox-row内部.main:

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

但由于某种原因.main,第二个柱子不再延伸100%height了.

这是jsbin演示

Answer 1

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

UPDATE

在Chrome和Safari中,(非弹性)儿童的高度无法以百分比形式识别.但Firefox和IE会根据百分比高度识别和缩放子项.

资源

因此,对于一个解决办法是增加.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>