Как спозиционировать карточки слайдера, чтобы контент не выпадал из потока и не появлялся горизонтальный скролл

Что проверяют

Понимаете ли вы, откуда берётся горизонтальный скролл страницы и как работает переполнение во flex-раскладке. Следом часто просят объяснить, почему overflow-x: hidden на body плохое решение.

Как отвечать

Карточки остаются в потоке, а переполнение ограничивается одним контейнером. Каркас: внешняя обёртка шириной 100% обрезает лишнее, внутри лента-трек, в ней карточки.

• трек на flex или grid: display: flex; gap: 16px, у карточек flex: 0 0 auto и ширина через calc() или clamp(). На grid то же даёт grid-auto-flow: column с grid-auto-columns;
• прокрутка внутри ленты: для нативного слайдера трек получает overflow-x: auto и scroll-snap-type: x mandatory, карточки scroll-snap-align: start. Скроллится лента, а не страница, и свайп работает без JS;
• слайдер на JS: трек двигают через transform: translateX(), раскладку это не меняет. Обёртке ставят overflow: hidden или overflow-x: clip. В отличие от hidden, clip не делает элемент контейнером прокрутки, и position: sticky у потомков продолжает работать;
• min-width: 0: у flex-элемента по умолчанию min-width: auto, и широкое содержимое не даёт ему сжаться. Если слайдер стоит в колонке flex- или grid-раскладки, колонке нужен min-width: 0 (в grid minmax(0, 1fr)), иначе она растягивается на ширину трека;
• отступы: промежутки через gap, а не margin-right, и box-sizing: border-box, чтобы padding не прибавлялся к ширине.

Виновника легко найти в консоли: [...document.querySelectorAll('*')].filter(el => el.getBoundingClientRect().right > innerWidth).

Где спотыкаются

Ставят width: 100vw. В vw входит ширина полосы прокрутки, поэтому на десктопе с обычным скроллбаром элемент вылезает ровно на её ширину.

Прячут симптом через overflow-x: hidden на body. Лишняя ширина никуда не делась, её просто обрезали, и следующий такой баг найти будет сложнее. А на промежуточной обёртке overflow-x: hidden ломает position: sticky у потомков.

Выносят карточки из потока через position: absolute. Контейнер схлопывается по высоте, контент под слайдером наезжает на него, и всё приходится подпирать фиксированной высотой.