My Position: Sticky Element Isn't Sticky When Using Flexbox

My position: sticky element isn't sticky when using flexbox

Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other browsers except for Firefox have some issues with position: sticky tables.

.flexbox-wrapper {  display: flex;  overflow: auto;  height: 200px;          /* Not necessary -- for example only */}.regular {  background-color: blue; /* Not necessary -- for example only */  height: 600px;          /* Not necessary -- for example only */}.sticky {  position: -webkit-sticky; /* for Safari */  position: sticky;  top: 0;  align-self: flex-start; /* <-- this is the fix */  background-color: red;  /* Not necessary -- for example only */}
<div class="flexbox-wrapper">  <div class="regular">    This is the regular box  </div>  <div class="sticky">    This is the sticky box  </div></div>

position: sticky not working within flexbox child

You need to specify a position where it should be fixed.
Do this by assigning something like top: "your wanted distance"px;

e.g.:

.colonnade__trigger .label {
position: sticky;
top: 10px;
display: block;
transform: rotate(90deg);
transform-origin: 0 100%
}

Look at MDN - Sticky Position

My sticky positioned element isn't acting like it should

You're div with the id of main has overflow-x: hidden. That div is the parent of the child that you want sticky and overflow hidden doesn't play well with position: sticky. Remove the overflow-x: hidden css and it works (line #118 in your style.css):

#main{
min-height:100%;
width: 100%;
/* overflow-x: hidden; */ //remove this
}

There's nothing overflowing, anyhow.

CSS position sticky doesn't work properly when element is inside another

if your aside will always have a fixed height use negative top value and make the parent container sticky: