Browser support for Flexbox inside of another flexbox
I've spent a whole day trying to make this work. While I am able to use one flex box, it becomes a hassle when a flex box shall contain another flex box.
I've tried to follow the hints from this question: Flexbox inside another flexbox?
It helped a little bit, but I'm still not there unfortunately.
What makes things even more confusing is that it seems like Safari and Chrome are displaying the same page totally different. This makes it even harder to understand what I am doing wrong.
What I'm trying to do is, having one outer flex box with a header and content. This outer flex box shall have another flex box inside the content, again with header and content.
It seems like the table which is located inside of the inner flex box's content does not belong to the inner flex box.
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>When using Flexbox and take full advantage of its properties, one will get at cross browser solution.
The major part here is to drop all height:100%; and make use of the Flebox growth property, flex-grow .
Additionally, I made both outerContent and innerContent flex containers, so Flebox can take care of filling the remaining space all the way.
Note, I have tested this with success on Chrome/Firefox/IE11/Edge
Fiddle demo
Stack snippet
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>