为什么嵌套的Flexbox无法在Chrome中使用？

TomR 发表于 Dev

汤姆

我有带嵌套flexbox的代码：https ://jsfiddle.net/tomrhodes/8pf1q706/ ，我希望“内容2”总是填充剩余的空间。它可以在Firefox上运行，但不能在Google Chrome上运行，为什么不起作用？

重要的是不要同时使用一个div元素作为flexbox的项目和父项，所以-我已经清楚地分开了这些角色。

html,
body {
  height: 100%;
  margin: 0;
  border: solid magenta;
}

.row2 {
  background: #f8f9fa;
  margin-top: 20px;
  flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
}

.container {
  display: flex;
  display: -webkit-flex;
  flex-flow: column;
  -webkit-flex-flow: column;
  height: 100%;
  border: solid blue;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: solid blue;
}

.outsidebox {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: solid purple;
}

.headerstyle {
  flex: 0 1 auto;
  border: solid green;
}

.contentstyle {
  flex: 1 1 auto;
  border: solid green;
}

.footerstyle {
  flex: 0 1 40px;
  border: solid green;
}

.wrapper {
  flex: 1 1 auto;
  border: solid yellow;
}

<div class="outsidebox">
  <div class="box">
    <div class="headerstyle">header</div>
    <div class="contentstyle">
      <div class="outsidebox">
        <div class="headerstyle">header 2</div>
        <div class="contentstyle">content 2</div>
        <div class="footerstyle">footer 2</div>
      </div>
    </div>
    <div class="footerstyle">footer</div>
  </div>
</div>

皮特

我想这就是您想要的-我已经使内容样式具有沿列方向的弹性，并且弹性增长，因此它填充了父容器：

* {box-sizing:border-box;}
html,
body {
  height: 100%;
  margin: 0;
  border: solid magenta;
}

.row2 {
  background: #f8f9fa;
  margin-top: 20px;
  flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
}

.container {
  display: flex;
  display: -webkit-flex;
  flex-flow: column;
  -webkit-flex-flow: column;
  height: 100%;
  border: solid blue;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: solid blue;
}

.outsidebox {
  flex-grow:1;
  display: flex;
  flex-flow: column;  
  height: 100%;
  border: solid purple;
}

.headerstyle {
  flex: 0 1 auto;
  border: solid green;
}

.contentstyle {
  flex-grow:1;
  display:flex;
  flex-direction:column;   /* make this flex and column */
  border: solid green;
  width:100%;
}

.footerstyle {
  flex: 0 1 40px;
  border: solid green;
}

.wrapper {
  flex: 1 1 auto;
  border: solid yellow;
}

<div class="outsidebox">
  <div class="box">
    <div class="headerstyle">header</div>
    <div class="contentstyle">
      <div class="outsidebox">
        <div class="headerstyle">header 2</div>
        <div class="contentstyle">content 2</div>
        <div class="footerstyle">footer 2</div>
      </div>
    </div>
    <div class="footerstyle">footer</div>
  </div>
</div>

或简化：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  border: solid magenta;
}

.outsidebox {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  height: 100%;
  border: solid purple;
}

.headerstyle {
  flex: 0 1 auto;
  border: solid green;
}

.contentstyle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border: solid green;
  width: 100%;
}

.footerstyle {
  flex: 0 1 40px;
  border: solid green;
}

<div class="outsidebox">
  <div class="headerstyle">header</div>
  <div class="contentstyle">
    <div class="outsidebox">
      <div class="headerstyle">header 2</div>
      <div class="contentstyle">content 2</div>
      <div class="footerstyle">footer 2</div>
    </div>
  </div>
  <div class="footerstyle">footer</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。