Предотвращение уменьшения высоты элементов в контейнере flexbox

На чтение 2 мин Опубликовано 22.09.2024

Вопрос или проблема

У меня есть базовая разметка с использованием flexbox, в которой есть flex-контейнер. Внутри flex-контейнера находится меню вверху и контейнер для изображений ниже. Контейнер для изображений имеет динамическую высоту, которая увеличивается в вертикальном направлении, чтобы вмещать изображения, высота которых увеличивается, так как у них есть соотношение сторон и процентная ширина. Контейнер под меню увеличивает свой размер и занимает пространство меню, несмотря на то, что я задал height равным 50px. Как я могу предотвратить сжатие меню?

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: lightblue;
}

.top-menu {
  height: 50px;
  width: 100%;
  background-color: orange;
}

.images-container {
  width: 50%;
  border: 2px dashed blue;
}

img {
  width: 100%;
  display: block;
}

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, другое WebKit */
  -moz-box-sizing: border-box; /* Firefox, другой Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

Code Sandbox: https://codesandbox.io/p/sandbox/image-container-wjw2ld

Установите flex-shrink: 0 (по умолчанию 1), чтобы предотвратить уменьшение высоты.

Ответ или решение

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

Вот как вы можете изменить ваш CSS код, чтобы достичь желаемого результата:

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: lightblue;
}

.top-menu {
  height: 50px;
  width: 100%;
  background-color: orange;
  flex-shrink: 0; /* Предотвращает сжатие элемента меню */
}

.images-container {
  width: 50%;
  border: 2px dashed blue;
  flex-grow: 1; /* Позволяет контейнеру для изображений занимать оставшееся пространство */
}

img {
  width: 100%;
  display: block;
}

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

* {
  box-sizing: border-box; /* Применяется для всех элементов */
}

С некоторыми изменениями в вашем коде:

Добавлено flex-shrink: 0; в стиль .top-menu. Это предотвращает уменьшение высоты меню, даже если высота контейнера изображений увеличивается.
Добавлен flex-grow: 1; в стиль для .images-container, чтобы контейнер изображений занимал оставшееся пространство флекс-контейнера без сжатия меню.

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

Дополнительно, вы можете протестировать ваше решение в предоставленном вами Code Sandbox, чтобы убедиться, что все работает должным образом.