如何在Safari中修復flex 50％佈局問題？

Question

我有一個柔性佈局的小例子，我對Safari有一些問題（版本10.1.2（12603.3.8））

所以有一個內容，它裏面有四個框，佈局2×2。底部有一個頁腳部分。 我想將這些框放在內容div中，以便將其高度和寬度填充50％。但在Safari中，它似乎忽略了頁腳部分，並且它將框放置爲與整頁對齊。

所以在這裏我想要什麼，以實現和它的作品在Chrome中：

而這正是它看起來像在Safari：

我設法嘗試在高塞拉利昂那裏是一個新的Safari（版本11），它的工作原理。所以它一定是一個bug，但我們可以在Safari 10中處理這個問題嗎？謝謝！

這是我的代碼

HTML：

* { 
 
    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

由於content是你不使用height使其填補其母公司柔性列項，您可以使用flex-grow。

上content取出高度，並添加flex-grow: 1

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

也沒必要爲width: 100%，它在默認情況下

棧片斷

* { 
 
    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>