Flex-grow 在 IE 11 上表现不同答案

【问题标题】：Flex-grow behaving differently on IE 11Flex-grow 在 IE 11 上表现不同
【发布时间】：2020-03-09 12:15:39
【问题描述】：

我在 IE 上尝试使用 flexbox，发现我的导航栏在 IE 上的工作方式与所有其他浏览器不同。

只要右侧的按钮不适合徽标旁边的空间，导航栏就会出现在两行中。如果不合适，则使用 flex-wrap: wrap 将其推到第二行。当它被推到第二行时，它会在整个屏幕宽度上居中所有按钮。

我通过在徽标和导航栏之间的间隔上使用高 flex-grow 数字来解决此问题。这适用于 chrome、edge 等，但不适用于 Internet Explorer 11。

我用来测试这个的演示： https://jsfiddle.net/td2rq4h1/

*{
  box-sizing: border-box;
}

body{
  background: red;
}

.logo{
  background-color: yellow;
  width: 145px;
  height: 70px;
  margin-right: 100px;
}
#headermenu{
  background-color: gray;
  
  .telephone {
    border: 3px solid pink;
  width: 145px;
  height: 30px;
  margin-right: 100px;
  }
}

#menu{
  background-color: blue;
}

.spacer {
  flex-grow: 1000;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}

.inner-spacer {
  flex-grow: 1;
  flex-basis: 100%;
}

.link {
  flex-grow: 0;
}

nav{
  border: 5px solid black;
  flex: 1 1;
  display: flex;
  justify-content: center;
  
  
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  li{
      border: 2px solid purple;
      background-color: white;
      padding: 1em;
      white-space: pre;
      margin: 0;
      display: inline-block;
    }

<div id="menu" class="d-flex flex-wrap">
  <div class="logo">Logo</div>
  <div class="spacer"></div>
  <nav>
    <ul class="d-flex flex-row">
      <li>Home</li>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

谁能解释一下为什么会发生这种情况以及我该如何解决这个问题？谢谢

【问题讨论】：

flex: 1 1; is not valid ... 首先使其简单，然后尽可能避免出现意外行为；）

标签： html css flexbox internet-explorer-11

【解决方案1】：

您可以减少flex: x 属性的使用，而改用margin 来玩... 挤压flex 值..

从破碎的 jsfiddle 分叉的示例：

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

body {
  background: red;
}

.logo {
  background-color: yellow;
  width: 145px;
  height: 70px;
  margin-right: 100px;
}

#headermenu {
  background-color: gray;
}

#headermenu .telephone {
  border: 3px solid pink;
  width: 145px;
  height: 30px;
  margin-right: 100px;
}

#menu {
  background-color: blue;
}

.spacer {
  flex-grow: 1;
  background-color: green;
  display: flex;
}

nav {
  border: 5px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

nav ul li {
  border: 2px solid purple;
  background-color: white;
  padding: 1em;
  white-space: pre;
  margin: 0;
  display: inline-block;
}

<div id="menu" class="d-flex flex-wrap">
  <div class="logo">Logo</div>
  <div class="spacer"></div>
  <nav>
    <ul class="d-flex flex-row">
      <li>Home</li>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

解释：IE11 很快就会有十年的历史，并且从那时起就没有更新其 flex 实现的错误。从那以后一直是边缘，甚至边缘都将停止更新。

【讨论】：