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

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

При использовании 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>

css flexbox

06.04.2019 14:04

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

153

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема не в свойстве flex-grow, а в том, что у .actual-menu есть display: table. Если вы прочитаете ответы и комментарии этот вопрос о стеке, вы увидите, что, короче говоря, прямое использование таблицы в качестве гибкого дочернего элемента — плохая идея.

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

Спасибо. Я понял, что проблема связана и с таблицей, и решил ее так же, как вы. Спасибо еще раз.

— 07.04.2019 22:23

06.04.2019 21:18