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

Question

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

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

根据我的研究，问题在于 actual-menu div 中的 flex-grow。

我尝试创建一个简单的 codepen sn-p 来说明我的问题。

sn-p 应该全屏运行（将菜单显示为单行）。

提前致谢。

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 的答案和 cmets，你会发现，简而言之，直接使用 table 作为 flex child 是一个坏主意。

我可以看到，您使用表格布局只是为了实现菜单项的文本居中。但是既然你已经在布局的其他部分使用了 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>