浏览器支持另一个Flexbox内部的Flexbox
我花了整整一天的时间来完成这项工作。 虽然我能够使用一个柔性盒，但当柔性盒包含另一个柔性盒时，它变得很麻烦。
我试图按照这个问题的提示：另一个Flexbox内的Flexbox？
它有一点帮助，但我仍然不幸在那里。
更令人困惑的是，Safari和Chrome似乎显示完全不同的页面。 这使得我更难理解我做错了什么。
我想要做的是，有一个外部弹性框与标题和内容。 这个外部弹性盒应该在内容物中具有另一个弹性盒，同样具有标题和内容。
似乎位于内部柔性盒内部的表格不属于内部柔性盒。
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
height: 100%;
overflow: hidden;
}
.outerFlexBox {
height:100%;
display: flex;
display: -webkit-flex; /* for Safari */
flex-direction: column;
overflow: hidden;
-webkit-flex-direction: column; /* for Safari */
background-color: green;
border: black dotted;
}
.outerHeader {
border: blue dotted;
}
.outerContent {
flex: 1;
border: red dotted;
overflow: hidden;
}
.innerFlexBox {
height:100%;
display: flex;
display: -webkit-flex; /* for Safari */
flex-direction: column;
overflow: hidden;
-webkit-flex-direction: column; /* for Safari */
background-color: yellow;
border: black solid;
}
.innerHeader {
border: blue solid;
}
.innerContent {
flex: 1;
border: red solid;
overflow: hidden;
}
.myTable {
flex: 1;
height: 100%;
min-height: 100%;
width: 100%;
overflow-y: auto;
border: grey solid;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container-fluid outerFlexBox">
<div class="outerHeader">
<h4>Some Outer Header</h4>
</div>
<div class="outerContent">
<p>Some outer content</p>
<div class="innerFlexBox">
<div class="innerHeader">
<p>Some Inner Header</p>
</div>
</div>
<div class="innerContent">
<p>Some inner content</p>
<table class="myTable">
<thead>
<tr><th>Some Header Column</th></tr>
</thead>
<tbody>
<tr><td>Some row</td></tr>
<tr><td>Some row</td></tr>
<tr><td>Some row</td></tr>
<tr><td>Some row</td></tr>
<tr><td>Some row</td></tr>
<tr><td>Some row</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>在使用Flexbox并充分利用其特性时，人们将获得跨浏览器解决方案。
这里的主要部分是降低所有height:100%; 并利用Flebox增长属性flex-grow 。
此外，我制作了outerContent和innerContent flex容器，因此Flebox可以一直照顾剩余的空间。
请注意，我已经在Chrome / Firefox / IE11 / Edge上成功进行了测试
小提琴演示
堆栈片段
html, body {
margin: 0;
}
body {
display: flex; /* IE11 fix */
}
.outerFlexBox {
flex: 1; /* IE11 fix */
min-height: 100vh;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
background-color: green;
border: black dotted;
}
.outerHeader {
border: blue dotted;
}
.outerContent {
flex-grow: 1;
border: red dotted;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
}
.innerFlexBox {
flex-grow: 1;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
background-color: yellow;
border: black solid;
}
.innerHeader {
border: blue solid;
}
.innerContent {
flex-grow: 1;
border: red solid;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
}
.myTable {
flex-grow: 1;
width: 100%;
border: grey solid;
}<div class="container-fluid outerFlexBox">
<div class="outerHeader">
<h4>Some Outer Header</h4>
</div>
<div class="outerContent">
<p>Some outer content</p>
<div class="innerFlexBox">
<div class="innerHeader">
<p>Some Inner Header</p>
</div>
<div class="innerContent">
<p>Some inner content</p>
<table class="myTable">
<thead>
<tr>
<th>Some Header Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>