Позиция: липкий не ведет себя должным образом в гибкой строке. ⇐ Html

[Anonymous]

У меня довольно простой макет вики с панелью навигации и содержимым статьи.
Я хочу, чтобы панель навигации была липкой при прокрутке содержимого статьи, поэтому я добавил css свойства соответственно.
По сути, у меня есть основной макет, который представляет собой гибкую строку с двумя дочерними элементами, которая растягивает их так, чтобы они имели одинаковую высоту. Тогда моя панель навигации находится в контейнере той же высоты, что и содержимое статьи, у нее установлены свойства Position: Sticky и Top: 0. Он должен работать таким образом, но это не так...
Я тщетно пытался найти в Интернете решение своей проблемы.
Вот мой HTML-макет:

Код: Выделить всё

Quelle.s interrogation.s as-tu ?

...Useful links (list of )




...The article (div)

а вот соответствующий фрагмент CSS (sass):

Код: Выделить всё

.wiki-page {
position: relative;
width: 100%;
@include flex(row, space-between, stretch);

#menu-bar-container {
position: relative;
}

#menu-bar {
position: sticky;
top: 0;
align-self: flex-start;
width: 500px;
max-height: calc(100vh - $margin * 2);
}

#wiki-content {
width: 100%;
@include flex(column, start, start);
}
}

Когда я проверяю визуализированную страницу, размер работает так, как ожидалось, но прилипания не происходит...
Любая помощь будет очень полезна оценено
Изображение проверенного контейнера навигационного меню
Изображение проверенного содержимого статьи
Изображение проверенное меню навигации
Изображение позиции: липкий не применяется

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