Ich habe einen ganzen Tag damit verbracht, diese Arbeit zu machen. Während ich in der Lage bin, eine Flex-Box zu verwenden, wird es ein Problem, wenn eine Flex-Box eine andere Flex-Box enthalten soll.Browser-Unterstützung für Flexbox innerhalb einer anderen Flexbox
Ich habe versucht, die Hinweise von dieser Frage zu folgen: Flexbox inside another flexbox?
es ein wenig geholfen, aber ich bin leider immer noch nicht da.
Was die Sache noch verwirrender macht, ist, dass es scheint, als würden Safari und Chrome dieselbe Seite völlig anders anzeigen. Das macht es noch schwerer zu verstehen, was ich falsch mache.
Was ich versuche zu tun ist, mit einer äußeren Flex-Box mit einem Header und Inhalt. Diese äußere Flexbox muss eine weitere Flex-Box innerhalb des Inhalts haben, wiederum mit Header und Inhalt.
Es sieht so aus, als ob der Tisch, der sich im Inhalt der inneren Flexbox befindet, nicht zur inneren Flexbox gehört.
html {
height: 100%;
}
body {
margin: 0;
\t min-height: 100%;
\t height: 100%;
\t 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 {
\t flex: 1;
border: red solid;
overflow: hidden;
}
.myTable {
\t flex: 1;
\t height: 100%;
\t min-height: 100%;
\t width: 100%;
\t overflow-y: auto;
\t border: grey solid;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
\t <div class="container-fluid outerFlexBox">
<div class="outerHeader">
<h4>Some Outer Header</h4>
</div>
<div class="outerContent">
\t \t <p>Some outer content</p>
\t \t <div class="innerFlexBox">
\t \t <div class="innerHeader">
\t \t \t <p>Some Inner Header</p>
\t \t </div>
\t \t </div>
\t \t <div class="innerContent">
\t \t \t <p>Some inner content</p>
\t \t \t <table class="myTable">
\t \t \t \t <thead>
\t \t \t \t \t <tr><th>Some Header Column</th></tr>
\t \t \t \t </thead>
\t \t \t \t <tbody>
\t \t \t \t \t <tr><td>Some row</td></tr>
\t \t \t \t \t <tr><td>Some row</td></tr>
\t \t \t \t \t <tr><td>Some row</td></tr>
\t \t \t \t \t <tr><td>Some row</td></tr>
\t \t \t \t \t <tr><td>Some row</td></tr>
\t \t \t \t \t <tr><td>Some row</td></tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t </div>
</div>
</div>
</body>
</html>Und das ist, wie dieselbe Seite wie auf Chrome sieht (links) und Safari (rechts). 
Ich habe gebissen vorher von verschachtelten Flexboxen in Safari, vor allem mit 'flex-direction: colu mn'. Dies könnte einen Besuch wert sein: https://github.com/philipwalton/flexbugs –