Неожиданное поведение при контроле переполнения в коде Flexbox

Я пытаюсь создать такой макет:

верхний див имеет фиксированную высоту 100 пикселей, нижний div имеет фиксированную высоту 50 пикселей, а промежуточный div использует доступное пространство окна.

Вот код:

html body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.flex-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topRow {
  background-color: gray;
  height: 100px;
  border: 2px solid black;
}

.bottomRow {
  background-color: cadetblue;
  border: 2px solid black;
  height: 50px;
}

.content {
  background-color: orange;
  border: 2px solid black;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class = "flex-grid">
  <div class = "topRow">Top div</div>
  <div class = "content">
    <div>
      <p>First column</p>
    </div>
    <div style = "display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">
      <p>first row</p>
      <p>2 row</p>
      <p>3 row</p>
      <p>4 row</p>
      <p>5 row</p>
      <p>6 row</p>
      <p>7 row</p>
      <p>8 row</p>
      <p>9 row</p>
      <p>10 row</p>
      <p>11 row</p>
      <p>12 row</p>
      <p>13 row</p>
      <p>14 row</p>
      <p>15 row</p>
      <p>16 row</p>
      <p>17 row</p>
      <p>18 row</p>
      <p>19 row</p>
      <p>20 row</p>
      <p>3-1 row</p>
      <p>3r2 row</p>
      <p>3r3 row</p>
      <p>3r4 row</p>
      <p>3r5 row</p>
      <p>3r6 row</p>
      <p>3r7 row</p>
      <p>last row</p>
    </div>
    <div>
      <p>The last column</p>
    </div>
  </div>
  <div class = "bottomRow">Bottom div</div>
</div>

Если я запускаю этот код в Chrome (версия 70.0.3538.77 (официальная сборка) (64-разрядная версия)) в Windows 10 x64, он работает так, как я ожидал, однако, когда я запускаю его в Firefox (версия 63.0.1 (64-разрядная) (Официальная Build)) в той же Windows 10 работает не так, как ожидалось.

Вот результат в Firefox:

Неожиданное поведение при контроле переполнения в коде Flexbox

Как видите, верхний div не имеет высоты 100 пикселей, а нижний div находится вне окна браузера. Также белый столбец игнорирует переполнение-y: прокрутка

Кто-нибудь может сказать мне, что я делаю не так, что это не работает в Firefox?

PD: Я также тестировал тот же код в Firefox 57 и получил тот же результат, что и в Firefox 63.0.1.

css google-chrome firefox flexbox

09.11.2018 00:07

Приемы 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 сценарий полностью изменился.

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

Ответы 1

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

`flex-shrink`

Первоначальная настройка гибкого контейнера - flex-shrink: 1. Это означает, что гибкие элементы могут сжиматься, чтобы предотвратить переполнение контейнера. Вы можете отключить эту функцию с помощью flex-shrink: 0.

.topRow {
   height: 100px;
   flex-shrink: 0;
}

ИЛИ

.topRow {
   flex: 0 0 100px; /* flex-grow, flex-shrink, flex-basis */
}

Для получения дополнительной информации см. Раздел Фактор flex-shrink в моем ответе здесь:

В чем разница между гибкой основой и шириной?

`min-height: auto`

Первоначальная настройка гибкого контейнера - min-height: auto. Это означает, что гибкие элементы не могут быть меньше высоты их содержимого. Чтобы изменить этот параметр, используйте min-height: 0 или overflow: auto.

.content {
   overflow: auto;
}

См. Этот пост для получения более подробной информации:

Почему гибкие элементы не сжимаются по сравнению с размером содержимого?

Чтобы понять, почему ваш макет работал в Chrome, но не в Firefox, см. Раздел Примечания к рендерингу в браузере в моем ответе на сообщение выше.

демонстрация jsFiddle

 .flex-grid {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }

 .topRow {
   background-color: gray;
   height: 100px;
   flex-shrink: 0; /* new */
   border: 2px solid black;
 }

 .bottomRow {
   background-color: cadetblue;
   border: 2px solid black;
   /* height: 50px; */
   flex: 0 0 50px; /* new */
 }

 .content {
   background-color: orange;
   border: 2px solid black;
   flex: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   overflow: auto; /* new */
 }

 body {
   margin: 0;
 }

<div class = "flex-grid">
  <div class = "topRow">Top div</div>
  <div class = "content">
    <div>
      <p>First column</p>
    </div>
    <div style = "display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">
      <p>first row</p>
      <p>2 row</p>
      <p>3 row</p>
      <p>4 row</p>
      <p>5 row</p>
      <p>6 row</p>
      <p>7 row</p>
      <p>8 row</p>
      <p>9 row</p>
      <p>10 row</p>
      <p>11 row</p>
      <p>12 row</p>
      <p>13 row</p>
      <p>14 row</p>
      <p>15 row</p>
      <p>16 row</p>
      <p>17 row</p>
      <p>18 row</p>
      <p>19 row</p>
      <p>20 row</p>
      <p>3-1 row</p>
      <p>3r2 row</p>
      <p>3r3 row</p>
      <p>3r4 row</p>
      <p>3r5 row</p>
      <p>3r6 row</p>
      <p>3r7 row</p>
      <p>last row</p>
    </div>
    <div>
      <p>The last column</p>
    </div>
  </div>
  <div class = "bottomRow">Bottom div</div>
</div>

09.11.2018 00:52