List height 100% doesn't work in Safari

Question

I ran into a problem where a ul element is not displayed at 100% height of it's parent in safari. I understand that it's not a new problem and might have been answered here before but I couldn't find an answer that would be close to my specific problem, most of them are about a div not being 100% of the whole page etc.

Here is how it looks in Chrome (this is the result that I want):

And here is how it looks in Safari:

Here is the 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;
}

Note that the rest of the css in .list class is needed for my application.

Please check out the Jsfiddle

Cheers!

Answer 1

.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;
  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

Try to add normalize.css to your code (in jsfiddle you can do this just from the css options) then try safari and it should works.