a-x-/scroll-in-flex.md

## scroll-in-flex.md

      
    Raw
  

              scroll-in-flex.md
            
          
    Как поместить scroll-контейнер во flexbox и не облажаться.


Столкнулись с проблемой: блок со скролом распепячивает flex. Давайте разбираться.
4 месяца назад показалось, что хак найден, о чём мы поспешили рассказать в твиттере, но потом стало ясно что таки поспешили.
Помотрели в спеку и mdn, но ключей к решению не нашли.

MDN: In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

После экспериментов (демки ниже) стало понятно что приводит к растяжению ширины scroll-контейнера: родительские flex-контейнеры без заданной через width ширины, см. сниппет 1.4. Ширина-то необходима как следует из статьи с MDN.
Но очевидно, задание width элементу flex-контейнера ломает flex-поведение, см. сниппеты 1.6. и 2.2.
А коли во flex мы не имеем права задавать width, то и scroll справедливо не работает.

Слава Гридам, был найден ХАК: Если обернуть scroll в грид из одного элемента, то задавать ширину или white-space, как указано в документации не трубуется, см. сниппет 0.0.
Демки в порядке дебага

0. Хак


🧡 Grid hack

1. Попытка сломать простой работающий скрол внутри ширины в %


❎ Just overflow
❎ Just overflow in flex wrap
❎ Just overflow with single scrollable
ссылка сломалась 👹 Minimal reproducing: after extra flex added!
ссылка сломалась Fixed: .flex-wrap.inner { width: 100%; }
ссылка сломалась But it's broken at all

2. Попытка починить сломанное решение из проекта


ссылка сломалась 🚩 Reproducing (copied from project)
ссылка сломалась ✴️ Removing div.scroll-wrap fixes it! But width still overflows
🧡 With Grid hack

Ответы на вопросы

Почему просто не заворачивать всё в гриды
В динамических SPA компонентах содержимое может произвольным образом меняться, часто нельзя задавать в css жёсткую структуры. Хотя гриды и обладают гибкостью к содержимому контейнера (например, можно описать колонки для произвольного количества «строк»), часто это или излишне или всё же недостаточно гибко и требует дублировать знание о структуре динамического контента в css.
Где это нужно
Мы эту проблему решили для скролящихся вкладок внутри 2-х вложенных flex-контейнеров составной шапки. Эта шапка состоит из родительского React-компонента, описывающего компоновку (layout) и встроенного фрагмента, специфичного для этого типа страниц.
Зачем в демках два вложенных флекса
Например .scroll-wrap-2 это прекрасный пример хака «scrollbar-hider»: прячущего скролбар внизу для любой платформы.
В других демках вложенные флексы демонструруют реальную структуры вёрстки боевого проекта состоящего из встроенных из вне компонент.
Продолжение

В следующей статье расскажем про хак с display: grid и position: sticky в главных ролях.
Благодарности 😻

Эти результаты не стали бы реальностью без классных ребят из моей команды:
Спасибо Артёму @tetris0k и Жоре @boozingeorge