css - IE11 和 Safari 上的 Flexbox 布局中的文本重叠

Question

IE11 的 Flex 布局中存在文本和高度问题。

这个想法是这样的:

我有 3 行内容。 如果我有大量内容，我有一个滚动条，如下所示:

Chrome - 滚动条

但是，不支持 IE11 和 Safari，看起来像这样:

IE - 文本转义

这是代码:

.header-container {
  min-height: 100%;
}
.header-container .wrapper {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
}
.header-container .wrapper nav {
  height: 100%;
  width: 100%;
}
.header-container .wrapper nav ul {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.header-container .wrapper nav ul li {
  border-top: 1px solid #ccc;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.header-container .wrapper nav ul li p {
  margin: 0;
  padding: 10px 40px;
  text-align: center;
}

<div class="header-container">
  <header class="wrapper clearfix">
    <h1 class="title" style="display: none">h1.title</h1>
    <nav>
      <ul>
        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          </p>
        </li>
        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          </p>
        </li>
        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          </p>
        </li>
      </ul>

哪里出了问题？

Answer 1

就 Safari 而言...

尽管 Safari 9 支持所有标准 Flex 属性，但 Safari 8 及更早版本需要供应商前缀。

要快速添加所需的所有前缀，请使用 Autoprefixer .

有关 Flexbox 浏览器支持的详细信息，请参阅此处:http://caniuse.com/#search=flexbox