Sticky element inside flexbox (not in combination with)


Many similar questions have been posted to try and achieve position sticky with an element that has flex rules applied (e.g. this post is one of many that I tried the answers from), but my aim is to apply position:sticky to a child of a flex element.

I have a two-column layout with a menu on the left. The idea is that when the page is scrolled down, the blue-colored menu stays at the top (although the image above should scroll upwards, leaving just the menu visible in it’s place).

However, no matter of which combinations of align-self I apply, the menu still disappears vertically upwards with the image.

If its possible to combine flex with sticky, then I’m hoping there’s also a solution for the child element.

Fiddle here using SCSS

.PageContainer {

  .OuterContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    .SideOne {
      align-self: flex-start /* Solution from */; 
      width: 10em;
      .CompanyLogo {
        img {
          width: 100%;
      .MyStickMenu {
        border:1px solid blue;
        position: sticky;
        top: 0;

    .SideTwo {
      flex-grow: 1;
      flex-shrink: 1;
<div class="PageContainer">

  <div class="OuterContainer">

    <div class="SideOne">

      <div class="CompanyLogo">
        <img src="" alt="" />

      <div class="MyStickMenu">
          Not-so Sticky Menu
            <a href="#">Home</a>
            <a href="#">Away</a>


    <div class="SideTwo">

        Scrollable page




Your issue is not with the sticky property but with the expectations you have of it. A sticky element is only sticky within its parent and so the Side One‘s height limits how far the menu can go.

You’re going to have to put the Menu as a sibling to the "sides".

Alternatively you could divide Side One into two separate sides one for the menu and one for the rest, applying the position: sticky to the new side as it is the one who is supposed to cover its siblings while scrolling.

Answered By – Blye

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published