サファリでリストの高さ100％が機能しない

Question

サファリの親の高さに100％の高さでul要素が表示されないという問題が発生しました。私はそれが新しい問題ではなく、かつてここで答えられているかもしれないが、私の特定の問題に近い答えを見つけることができなかったことを理解している、それらのほとんどはページ全体の100％ではないdivに関する。

ここで

（これは私が望む結果である）、それはChromeでどのように見えるかです：

そして、ここでは、それはSafariでどのように見えるかです：

彼.listクラスの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です。

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

その後、サファリを試してみて、それが作品べき（jsfiddleであなただけのCSSのオプションからこれを行うことができます）あなたのコードにnormalize.cssを追加してください。