Как правильно отобразить скролл?

Question

[campus1]

Всем привет. Есть у меня блок, который я хочу скролить и что-бы контент в нём был sticky.
Сейчас у меня скролл отображается, но он очень большой, а если height убавить хоть на 1%, то его вообще нету и

position: sticky
 top: 0

ничего не дает(

Код

Спасибо!

Comments

[Сергей]

а если для sticky сделать position: fixed; ?

[campus1]

1Sergey1, Сначала так хотел сделать, но надо именно скролл и при скролле sticky

Answer 1

[Odisseya]

Пропишите для .wrapper{ align-items: flex-start; } и для .sticky{ position: fixed; }
Можно еще для .left { overflow-y: auto; }
Так происходит от того, что по умолчанию, флекс контейнер растягивает обе колонки на одинаковую высоту.

Comments

[campus1]

Не пойдет, поскольку мне так и надо, что-бы колонки были так как сейчас.

[Odisseya]

campus1, если я вас правильно понимаю, вам надо сделать флекс-элемент sticky, но скролл внутри него должен быть относительно его контента, а не общего контента флекс-контейнера. Если да, то сделайте:

.left {
  width: 40%;
  overflow-y: scroll;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

Answer 2

[Кира]

Если у родителя элемента с position: sticky есть overflow: hidden, overflow: scroll или overflow: auto, то sticky не сработает.

Подробнее