I have a pretty basic wiki layout, with a navigation bar and article content.
I want the nav bar to be sticky while scrolling the article content, so I've added css properties accordingly.
Basically I have a main layout which is a flex row with the two children, that stretches them so that they have both the same height. Then my nav bar is in a container that is the same height as the article content, it has the position: sticky and top: 0 properties set. It should be able to work like that except it isn't...
I've tried searching the web for a solution to my problem in vain.
Here is my html layout :
<div className="wiki-page"><div id="menu-bar-container"><div id="menu-bar"><h2>Quelle.s interrogation.s as-tu ?</h2><div id="links"> ...Useful links (list of <a>)</div></div></div><div id="wiki-content"> ...The article (div)</div></div>and here is the concerned chunk of 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); }}When I inspect the rendered page, the sizing behaves as expected, yet the sticky does not takes place...
Any help would be greatly appreciated 🙏
Image of the inspected navigation menu container
Image of the inspected article content