Переполнение в колонке

Переполнение в колонке#

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

Чтобы флекс-элементы в контейнере с flex-direction: column не выходили за границы родителя при сжатии, нужно работать с несколькими свойствами: flex-basis, flex-shrink и min-height

Основные приемы#

  • Настройка flex-shrink

По умолчанию flex-shrink имеет значение 1, что позволяет элементам сжиматься, если не хватает места. Если вы изменили это значение на 0, элементы не будут уменьшаться и вызовут переполнение. Убедитесь, что flex-shrink имеет значение 1 или больше.

  • Установка flex-basis

    • Для элементов с разной высотой: Используйте flex-basis: auto. Это позволит элементам иметь свой естественный размер, основанный на контенте. Сочетайте это с flex-grow (например, flex: 1) для равномерного распределения дополнительного пространства.

    • Для элементов с одинаковой высотой: Используйте flex-basis: 0 вместе с flex-grow: 1. Это означает, что элементы не имеют базового размера и равномерно распределяют все доступное пространство.

  • Использование min-height: 0

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

.flex-container {
  display: flex;
  flex-direction: column;
  height: 400px; /* Пример фиксированной высоты родителя */
  border: 2px solid blue;
}

.flex-item {
  flex-grow: 1;      /* Разрешает элементам занимать свободное место */
  flex-shrink: 1;    /* Позволяет элементам сжиматься */
  flex-basis: auto;  /* Базовый размер определяется контентом */
  min-height: 0;     /* Разрешает элементу сжиматься ниже его контента */
  padding: 10px;
  border: 1px solid red;
}

В этом примере:

  • flex-grow: 1 заставляет элементы растягиваться, чтобы заполнить всё свободное пространство.

  • flex-shrink: 1 позволяет им сжиматься, если места недостаточно.

  • min-height: 0 отменяет ограничение по минимальной высоте контента, что позволяет флексбоксу корректно сжимать элементы, чтобы они поместились в родительский контейнер.

Когда использовать flex-basis: 0#

Если вы хотите, чтобы все элементы имели одинаковую высоту, независимо от их контента, и занимали всё доступное пространство, используйте flex-basis: 0 вместе с flex-grow: 1:

.flex-item-equal-height {
  flex: 1 1 0; /* Сокращенная запись для flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

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

Что делать, если контент не помещается#

Если после сжатия контент все равно не помещается, можно добавить прокрутку.

.flex-item {
  overflow-y: auto; /* Добавляет вертикальную прокрутку, если контент не помещается */
}

Это позволит элементу сжиматься, а если контент всё ещё слишком большой, внутри элемента появится скролл, и сам элемент не будет выходить за пределы родителя.

Contents