Почему ширина и высота элемента flex влияют на визуализацию гибкого элемента?

Ответ 1

Исходная настройка контейнера flex align-items: stretch.

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

В контейнере направления строки, как и в вопросе, поперечная ось вертикальна.

Это означает, что предметы (изображения в этом случае) будут покрывать всю высоту контейнера.

Однако, когда элемент flex имеет определенный размер поперечного сечения, это переопределяет значение stretch по умолчанию.

Из спецификации:

8.3. Выравнивание по оси: align-items и align-selfСвойства

Элементы Flex могут быть выровнены по поперечной оси текущей строки гибкий контейнер, аналогичный justify-content, но в перпендикулярном направление.

stretch

Если свойство cross size элемента flex вычисляется до auto и ни одно из полей кросс-оси не имеет значения auto, элемент гибкости растягиваются.

Это ключевой язык:

Если свойство cross size элемента flex вычисляется до auto

И вот как спецификация определяет свойство "кросс-размер":

Ширина или высота элемента гибкости, в зависимости от того, что находится на кресте размер, размер элементов. Свойством кросс-размера является любой из width или height, который находится в поперечном измерении.

^{https://www.w3.org/TR/css-flexbox-1/#cross-size-property}

Таким образом, ваш код, кажется, воспроизводится, как определено в спецификации.

Это то, что у вас есть:

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

Ответ 2

Пробовал читать спецификации w3c flexbox и наткнулся на этот. В нем говорится, что

Для каждого измерения, если этот размер содержимого гибких контейнеров коробка - определенный размер, используйте это; если это измерение гибкости контейнер под размерами min или max-content, доступное пространство в этом измерении - это ограничение.

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

Надеюсь, что это поможет.

Ответ 3

Здесь вы написали max-height: 10vh, vh не поддерживает ни в каких браузерах, кроме самой последней версии iOS 6. Это относится ко всем единицам длины, связанным с видовым пространством. используйте другие значения вместо Vh, это будет работать нормально. Пожалуйста, прочтите этот блог https://css-tricks.com/the-lengths-of-css/.

.flex-parent {
  display: flex;
  max-height:  max-content;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

Ответ 4

Проблема заключается в том, где вы устанавливаете максимальную высоту. По умолчанию свойство css max-height не наследуется. Ваша декларация css создает div, который составляет 10% от высоты видового экрана. Изображение без настроек размеров сокращается на основе его размеров. Изображение, на которое вы устанавливаете неявные измерения, всегда будет такими размерами. В зависимости от размера div он может переполняться. Если вы помещаете свойство максимальной высоты на первое изображение, оно должно изменяться, сохраняя соотношение сторон одинаковым.

Ответ 5

Вы должны рассмотреть возможность их установки в px.