Text overlapping in flexbox layout on IE11 and Safari

问题

Have text & height problem in flex-layouts with IE11.

Here is the idea:

I have 3 rows of content. If I have large content I have a scroll bar which looks like this:

Chrome - scroll bar

BUT, not working with IE11 and Safari, looks like this:

IE - text escapes

Here is the code:

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

What's wrong there?

回答1:

In terms of Safari...

Although Safari 9 supports all standard flex properties, Safari 8 and older require vendor prefixes.

For a quick way to add all the prefixes you need use Autoprefixer.

For flexbox browser support details see here: http://caniuse.com/#search=flexbox

回答2:

I think the way to solve that problem is to use cross-browser prefixes and things like this..

Helpful link: http://ptb2.me/flexbox/ - here I found Flexbox / Layout CSS support for must popular browsers.

By using autoprefixer I found the solution.

Thanks Michael_B!

来源：https://stackoverflow.com/questions/33801508/text-overlapping-in-flexbox-layout-on-ie11-and-safari