Firefox and Chrome showing different results when using flex-grow

Question

I've built a simple menu system which shows different results when used in different browsers.

When using Chrome, the actual-menu div stretches correctly to fill the remaining space of the parent div, menu-container.

From what my research tells me the problem lies with the flex-grow in the actual-menu div.

I've attempted to create a simple codepen snippet to illustrate my problem.

The snippet should be run in full screen (The show the menu as a single line).

Thank in advance.

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>

score 2 · Accepted Answer · answered Apr 06 '19 at 19:18

The problem is not with flex-grow property, but rather with the fact, that the .actual-menu has display: table. If you read through the answers and comments of this stackoverflow question, you'll see that, in short, using a table as a flex child directly is a bad idea.

What I can see, is that you are using the table layout just to achieve text centering of the menu items. But since you are already using flexbox for other parts of your layout, why not use it here, like so:

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>

And if you insist on using the table, just wrap it in another div, so that the wrapper is a flex item, and it wraps the actual table, like so:

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>

Thank you. I've figured out the problem lied with the table as well and solved it similarly to how you did. Thanks again. — Locutus, Apr 07 '19 at 20:23

Firefox and Chrome showing different results when using flex-grow

1 Answers1