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

Question

我遇到了一个问题，其中ul元素在safari中的父级的100％高度没有显示。我知道这不是一个新问题，可能之前已在这里得到解答，但我找不到一个接近我特定问题的答案，其中大多数是关于div不是整页的100％等。< / p>

以下是它在Chrome中的外观（这是我想要的结果）：

Unix System Programming with Standard ML

以下是Safari的外观：

这是css：

.list

请注意，我的应用程序需要{{1}}类中的其余css。

请查看

干杯！

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将normalize.css添加到您的代码中（在jsfiddle中，您只需从css选项中执行此操作）然后尝试使用safari，它应该可以正常工作。