3
私はこの仕事をしようと一日を費やしました。 私は1つのフレックスボックスを使用することができますが、フレックスボックスに別のフレックスボックスが含まれている場合は面倒です。私はこの質問からヒントを追跡しようとした別のフレックスボックス内でのFlexboxのブラウザサポート
： Flexbox inside another flexbox?
それは少しを助けたが、私は残念ながらまだそこにいませんよ。
さらに混乱させる原因は、SafariとChromeが全く同じページを表示しているように見えることです。これは、私が間違っていることを理解することをさらに困難にします。
私がしようとしているのは、外側のフレックスボックスにヘッダーと内容が付いていることです。このアウターフレックスボックスは、内容の中に別のフレックスボックスをもうけ、ヘッダーと内容を含んでいなければならない。
内側フレックスボックスの内容物の内側にあるテーブルは、内側フレックスボックスに属していないようです。
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>そして、これは、この同じページにはクロム（左）とサファリ（右）のように見える方法です。 
をスニペットクローム/ Firefoxの/ IE11 /エッジ上の成功でこれをテストしています以前はSafariのネストされたフレックスボックス、特に 'flex-direction：colu mn '。これはチェックアウトする価値があります：https://github.com/philipwalton/flexbugs –