Переполнение не видно для центрированного гибкого элемента [дубликат]

Проблема

Flexbox делает центрирование очень простым.

Просто применяя align-items: center и justify-content: center к контейнеру flex, ваши (-ые) элементы (-ы) будут вертикально и

Однако существует проблема с этим методом, когда элемент гибкости больше, чем гибкий контейнер.

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

Для горизонтального переполнения левая часть становится недоступной (или правой секцией в языках RTL).

Вот пример с контейнером LTR, имеющим justify-content: center и три элемента гибкости:

См. нижнюю часть этого ответа для объяснение этого поведения.

Решение № 1

Чтобы исправить эту проблему, используйте автоматические поля flexbox вместо justify-content .

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

#flex-container {
    align-items: center;
    justify-content: center;
}

Используйте этот код для элемента flex:

.flex-item {
    margin: auto;
}

Revised Demo

Решение № 2 (еще не реализовано в большинстве браузеров)

Добавьте значение safe в ваше ключевое слово правило выравнивания:

justify-content: safe center

или

align-self: safe center

Из спецификации модуля выравнивания CSS :

4.4. Выравнивание переполнения: ключевые слова safe и unsafe и ограничения безопасности прокрутки

Когда элемент [flex item] больше, чем [flex container], он будет переполняться. Некоторые режимы выравнивания, если они соблюдены в этой ситуации, могут привести к потере данных: например, если содержимое боковой панели центрировано, когда они переполняются, они могут отправлять часть своих полей за край начала окна просмотра, которые нельзя прокрутить до .

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

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

safe

Если размер [flex item] переполняет контейнер [flex], а [гибкий элемент] выравнивается так, как если бы режим выравнивания был [flex-start].

unsafe

Независимо от относительных размеров [гибкого элемента] и [гибкого контейнера] данное значение выравнивания соблюдается.

Примечание. Модуль выравнивания ящиков используется для нескольких моделей макета коробки, а не только для гибких. Таким образом, в вышеприведенном отрезке spec термины в скобках фактически говорят «объект выравнивания», «контейнер выравнивания» и «start». Я использовал термины, специфичные для Flex, чтобы сосредоточиться на этой конкретной проблеме.

---

Объяснение для ограничения прокрутки из MDN:

Flex соображения элемента

Свойства выравнивания Flexbox выполняют «истинное» центрирование, в отличие от других методов центрирования в CSS. Это означает, что элементы гибкости будут оставаться центрированными, даже если они переполняют контейнер flex.

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

В будущей версии свойства выравнивания будут расширены, чтобы иметь также «безопасный» вариант.

На данный момент, если это вызывает беспокойство, вы можете вместо этого использовать поля для центрирования, так как они будут реагировать «безопасным» способом и перестанут центрироваться, если они переполняются.

Вместо использования свойств align- просто поместите поля auto на объекты гибкости, которые хотите центрировать.

Вместо свойств justify- поместите автоматические поля на внешние границы первого и последнего элементов гибкости в контейнере гибкого диска.

Поля auto будут «гибкими» и предполагают оставшееся пространство, центрируя элементы гибкости, когда есть оставшееся пространство, и переключение на нормальное выравнивание, когда нет.

Однако, если вы пытаетесь заменить justify-content центрированием на основе полей в многострочном flexbox, вам, вероятно, не повезло, так как вам нужно поставить поля на первом и последнем элементе гибкости на каждой строке. Если вы не сможете заранее предсказать, какие элементы попадут на какую строку, вы не можете надежно использовать центрирование на основе маркеров на главной оси, чтобы заменить свойство justify-content.