列表高度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浏览器，它应该工作。