使用flex-grow时，Firefox和Chrome显示不同的结果

Question

我建立了一个简单的菜单系统，当在不同的浏览器中使用时，该菜单系统会显示不同的结果。

使用Chrome时，实际菜单 div会正确拉伸以填充父div menu-container 的剩余空间。

根据我的研究告诉我，问题出在 actual-menu div中的弹性增长。

我试图创建一个简单的codepen代码段来说明我的问题。

该代码段应在全屏模式下运行（该菜单以单行显示）。

谢谢。

body {
  margin: 0;
  background-color: black;
}

.menu-container {
  position: relative;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  width: 59%;
  height: 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-container .menu-logo {
  width: 220px;
  height: 100%;
  background-image: url("https://via.placeholder.com/220x75.png");
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.menu-container .menu-social {
  position: absolute;
  flex: none;
  top: 0;
  right: 0;
}

.menu-container .menu-social img {
  padding-right: 5px;
}

.menu-container .actual-menu {
  position: relative;
  background-color: white;
  border-radius: 24px 0 0 24px;
  bottom: 0;
  height: 45px;
  width: auto;
  display: table;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  top: 35%;
  margin-left: 5px;
}

.menu-container ul.menu-links {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: auto;
}

.menu-container ul.menu-links li {
  display: inline;
  text-transform: uppercase;
  padding-right: 30px;
  font-size: 16pt;
  font-size: 2vh;
}

<div class="menu-container">
  <div class="menu-social">
    <img src="https://via.placeholder.com/27x15.png" alt="youtube">
    <img src="https://via.placeholder.com/27x15.png" alt="twitter">
    <img src="https://via.placeholder.com/27x15.png" alt="facebook">
    <img src="https://via.placeholder.com/27x15.png" alt="discord">
  </div>
  <div class="menu-logo"></div>
  <div class="actual-menu">
    <ul class="menu-links">
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

Answer 1

问题不在于flex-grow属性，而在于.actual-menu具有display: table的事实。简而言之，如果您仔细阅读this stackoverflow question的答案和评论，将会发现直接使用表作为flex子代是一个坏主意。

我看到的是，您使用表格布局只是为了实现菜单项的文本居中。但是，由于您已经在布局的其他部分使用了flexbox，为什么不在这里使用它，就像这样：

body {
  margin: 0;
  background-color: black;
}

.menu-container {
  position: relative;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  width: 59%;
  height: 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-container .menu-logo {
  width: 220px;
  height: 100%;
  background-image: url("https://via.placeholder.com/220x75.png");
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.menu-container .menu-social {
  position: absolute;
  flex: none;
  top: 0;
  right: 0;
}

.menu-container .menu-social img {
  padding-right: 5px;
}

.menu-container .actual-menu {
  position: relative;
  background-color: white;
  border-radius: 24px 0 0 24px;
  bottom: 0;
  height: 45px;
  width: auto;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  top: 35%;
  margin-left: 5px;
}

.menu-container ul.menu-links {
  width: 100%;
  margin: auto;
}

.menu-container ul.menu-links li {
  display: inline;
  text-transform: uppercase;
  padding-right: 30px;
  font-size: 16pt;
  font-size: 2vh;
}

<div class="menu-container">
  <div class="menu-social">
    <img src="https://via.placeholder.com/27x15.png" alt="youtube">
    <img src="https://via.placeholder.com/27x15.png" alt="twitter">
    <img src="https://via.placeholder.com/27x15.png" alt="facebook">
    <img src="https://via.placeholder.com/27x15.png" alt="discord">
  </div>
  <div class="menu-logo"></div>
  <div class="actual-menu">
    <ul class="menu-links">
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

如果您坚持使用该表，只需将其包装在另一个div中，这样包装器就是一个flex项，它包装实际的表，如下所示：

body {
  margin: 0;
  background-color: black;
}

.menu-container {
  position: relative;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  width: 59%;
  height: 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-container .menu-logo {
  width: 220px;
  height: 100%;
  background-image: url("https://via.placeholder.com/220x75.png");
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.menu-container .menu-social {
  position: absolute;
  flex: none;
  top: 0;
  right: 0;
}

.menu-container .menu-social img {
  padding-right: 5px;
}

.actual-menu-wrapper {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.menu-container .actual-menu {
  position: relative;
  background-color: white;
  border-radius: 24px 0 0 24px;
  bottom: 0;
  height: 45px;
  width: 100%;
  display: table;

  top: 35%;
  margin-left: 5px;
}

.menu-container ul.menu-links {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: auto;
}

.menu-container ul.menu-links li {
  display: inline;
  text-transform: uppercase;
  padding-right: 30px;
  font-size: 16pt;
  font-size: 2vh;
}

<div class="menu-container">
  <div class="menu-social">
    <img src="https://via.placeholder.com/27x15.png" alt="youtube">
    <img src="https://via.placeholder.com/27x15.png" alt="twitter">
    <img src="https://via.placeholder.com/27x15.png" alt="facebook">
    <img src="https://via.placeholder.com/27x15.png" alt="discord">
  </div>
  <div class="menu-logo"></div>
  <div class="actual-menu-wrapper">
  <div class="actual-menu">
    <ul class="menu-links">
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
  </div>
</div>