Firefox и Chrome показывают разные результаты при использовании flex-grow

Question

Я создал простую систему меню, которая показывает разные результаты при использовании в разных браузерах.

При использовании Chrome фактическое меню div правильно растягивается, чтобы заполнить оставшееся пространство родительского div, контейнер-меню .

Из того, что мои исследования говорят мне, проблема заключается в flex-grow в актуальном меню div.

Я попытался создать простой фрагмент кода для иллюстрации моей проблемы.

Фрагмент должен быть запущен в полноэкранном режиме (Показать меню в одной строке).

Спасибо заранее.

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. Если вы прочитаете ответы и комментарии на этот вопрос о стекопереработке , вы увидите, что, короче говоря, использование таблицы в качестве дочернего элемента 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, чтобы обертка была гибким элементом, и она оборачивает реальную таблицу следующим образом:

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>