Почему позиция: липкий не работает без переполнения в родительском контейнере? ⇐ CSS

[Anonymous]

Я пытаюсь создать липкую боковую панель, используя позицию: липкий, но она не ведет себя, как ожидалось. Боковая панель не прилипает, когда я прокручиваю страницу, хотя я установил правильное верхнее значение.
Вот мой код: < /p>

Sticky Sidebar

Lots of content here...
Lots more content...


< /code>
.wrapper {
display: flex;
}

.sidebar {
position: sticky;
top: 10px;
width: 200px;
background-color: #f8f9fa;
padding: 20px;
}

.content {
flex-grow: 1;
padding: 20px;
}
< /code>
The sticky behavior doesn’t activate when scrolling the page. I want the sidebar to remain sticky as I scroll down the content.

• I tried setting position: relative on the parent .wrapper, but it
  didn’t help.
• I expected the position: sticky element to remain fixed at 10px from the top of the viewport while scrolling.
• I added z-index to the sticky element, but that didn’t solve the issue.

Why is position: sticky not working here, and how can I fix it without adding overflow?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -container