Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.
Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.
А вот фиг!
Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.
Что же делать?
Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:
.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.
Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
По поводу поддержки браузерами: Chrome со 115 и Firefox с 63. И — ура — Safari с 17.6. В прошлый раз когда я эту статью упоминал — поддержка в Safari была только в TP.
А еще там Safari 26 вышла с поддержкой анимаций по скроллу, будем скоро вспоминать. Слава богу, macOS 26 для этого ставить не нужно.
#flex #css #scroll #бородач