Почему Firefox не учитывает высоту согнутого div, а Chrome?

Question

Это лучше всего иллюстрируется простым примером.

У меня есть контейнер с display: flex а также flex-direction: column с одним div внутри height: 300px а также flex: 1,

Chrome отображает вложенный div с высотой 300px, но Firefox отображает его как одну строку. Это просто нюанс между реализацией flexbox между двумя браузерами, или это какой-то плохой код? Если нюанс, какой лучший способ смягчить?

.container {
  display: flex;
  flex-direction: column;
}

.container > div {
  background-color: #666;
  color: white;
  flex: 1;
  height: 300px;
}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

Answer 1

flex: 1 Правило стенографии разбивается следующим образом:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Chrome видит это, но переопределяет flex-basis с height: 300px,

Firefox видит это, но не переопределяет flex-basis с height: 300px,

Простое кросс-браузерное решение - избавиться от height править и просто использовать:

flex: 1 0 300px

С точки зрения спецификации, Firefox имеет правильное поведение:

7.1. flex стенография

Когда коробка представляет собой гибкий элемент, flex вместо основного размера используется свойство, чтобы определить основной размер поля.

Основное свойство размера элемента Flex - это либо width или же height имущество.