列表高度100％在Safari中不起作用

Question

我遇到了一個問題，其中ul元素在safari中的父級的100％高度處未顯示。我明白，這不是一個新問題，可能在這裏已經回答了，但我找不到接近我的具體問題的答案，其中大多數是關於一個div不是整個頁面的100％等。

這裏是如何看起來在Chrome（這是我想要的結果）：

這裏是它的外觀在Safari：

他再次是CSS：

.container { 
    display: flex; 
    flex-flow: row wrap; 
} 

.header { 
    min-height: 60px; 
    border: 1px solid #000; 
} 

.list { 
    height: 100%; 
    display: flex; 
    justify-content: flex-start; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    padding: 10px; 
    background-color: #cecece; 
} 

注意，CSS的.list類剩下的就是需要我的應用程序。

請查看Jsfiddle

乾杯！

Answer 1

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.header { 
 
\t min-height: 60px; 
 
    border: 1px solid #000; 
 
} 
 

 
.list { 
 
\t height: 100%; 
 
\t display: flex; 
 
\t justify-content: flex-start; 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
    background-color: #cecece; 
 
} 
 

 
li { 
 
    padding: 10px; 
 
    background-color: #cecece; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <ul class="list"> 
 
     <li> 
 
     Donald 
 
     </li> 
 
     <li> 
 
     Hillary 
 
     </li> 
 
     <li> 
 
     Gary 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

嘗試添加normalize.css到您的代碼（的jsfiddle你可以從CSS選擇這樣做），然後嘗試Safari瀏覽器，它應該工作。