Safariで50％レイアウトの問題を修正するにはどうすればよいですか？

Question

フレックスレイアウトの小さな例がありますが、Safari（バージョン10.1.2（12603.3.8））に問題があります。

コンテンツがあり、その中に4つのボックスがあり、レイアウトは2x2。下部にフッターセクションがあります。 コンテンツのdiv内にボックスを配置して、その高さを高さと幅の50％で埋めたいとします。しかし、Safariでは、フッターセクションを無視し、ボックスをフルページに合わせて配置しているようです。

だから、ここで私は何を達成したいと、それはクロームで動作します。私はそこハイシエラでそれを試すために管理

：

そして、これが、それはSafariでどのように見えるかです新しいSafari（Ver。11）とそれが働いています。だから、バグでなければなりませんが、Safari 10でこれを処理できますか？ありがとうございました！

ここでは

HTML私のコードです：contentはあなたが使用し、それはその親を埋める作るためにheightを使用していないフレックス列項目であるので

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: white; 
 
    border: 1px solid tomato; 
 
} 
 

 
.box { 
 
    width: 50%; 
 
    height: 50%; 
 
    background: skyblue; 
 
    border: 1px solid black; 
 
} 
 

 
.footer { 
 
    opacity: 0.7; 
 
    flex: 0 0 auto; 
 
    height: 100px; 
 
    background: plum; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div>  
 
    </div> 
 
    <div class="footer"></div> 
 
</div>

Answer 1

flex-grow。

content上の高さを削除し、またwidth: 100%の必要は、それがデフォルトで

スタックは、スニペットことをしませんflex-grow: 1

.content { 
    flex-grow: 1;     /* added */ 
    display: flex; 
    flex-wrap: wrap; 
    background: white; 
    border: 1px solid tomato; 
} 

を追加

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background: white; 
 
    border: 1px solid tomato; 
 
} 
 

 
.box { 
 
    width: 50%; 
 
    background: skyblue; 
 
    border: 1px solid black; 
 
} 
 

 
.footer { 
 
    opacity: 0.7; 
 
    flex: 0 0 auto; 
 
    height: 100px; 
 
    background: plum; 
 
}

<div class="wrapper"> 
 

 
    <div class="content"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div>  
 
    </div> 
 

 
    <div class="footer"></div> 
 

 
</div>