<分区>
我有嵌套 flex 盒的代码:https://jsfiddle.net/tomrhodes/8pf1q706/我希望“内容 2”总是填满剩余空间。它适用于 Firefox,但它不适用于 Google Chrome,为什么它不起作用?
不要将一个 div 元素同时用作元素和 flexbox 的父元素,这一点非常重要,因此 - 我已经明确区分了这些 Angular 色。
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>