CODEWITHSUNDEEP
cssflexbox
Locutus
Locutus

Reputation: 13

Firefox and Chrome showing different results when using flex-grow

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>

Upvotes: 1

Views: 287

Answers (1)

Piotr Wicijowski
Piotr Wicijowski

Reputation: 2115

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>

Upvotes: 2

Related Questions