IE11 flexbox 文本不包含在列表项中

Question

我遇到了 IE11 的问题，即文本不像其他浏览器那样换行。我已经为这个问题设置了一个codepen。

https://codepen.io/johnny_gruber/pen/QmBePd

HTML

<header>
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg" alt="">
  </div>
  <div class="search">
      search
  </div>
  <div class="language">
      DE v
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Product & Solutions</li>
      <li>Industries</li>
      <li>Facilities</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Group Website</li>
    </ul>
  </nav>
  <div class="login">
    login v
  </div>
</header>

CSS

header {
  display: flex;
  flex-direction: row wrap;
  max-width: 100%;
}

.logo,
.search,
.language,
.login {
  flex-shrink: 0; 
}

ul {
  display: flex;
  float: right;
}

li {
  padding: 25px 15px;
}

nav {
  flex-grow: 1;
  flex-shrink: 1;
}

在 chrome 中，您可以看到预期的行为。如果可能，文本会换行。在 IE11 中，它只停留在一行上。是否有机会在 IE11 上获得相同的行为？

谢谢！

Answer 1

IE 11 要求将一个单位添加到第三个参数，即 flex-basis 属性

c/o CanIuse.com

从那里，只需将ul 设置为display:flex 和li 即可：

li {
  padding: 25px 15px;
  flex: 1 1 50px;
}

body {
  font-family: Arial;
  font-size: 16px;
}

header {
  display: flex;
  flex-direction: row wrap;
  max-width: 100%;
}

.logo {
  height: 72px;
}

.search,
.language,
.login {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid silver;
}

.logo,
.search,
.language,
.login {
  flex-shrink: 0; 
}

ul {
  display: flex;
  list-style:none;
}

li {
  padding: 25px 15px;
  flex: 1 1 50px;
}

nav {
  flex-grow: 1;
  flex-shrink: 1;
}

<header>
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg" alt="">
  </div>
  <div class="search">
      search
  </div>
  <div class="language">
      DE v
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Product & Solutions</li>
      <li>Industries</li>
      <li>Facilities</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Group Website</li>
    </ul>
  </nav>
  <div class="login">
    login v
  </div>
</header>

Codepen.io Demo