Sticky element inside flexbox (not in combination with)-CodePudding

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 {
      background-color:#fee;  
      align-self: flex-start /* Solution from https://stackoverflow.com/questions/44446671 */; 
      width: 10em;
      
      .CompanyLogo {
        img {
          width: 100%;
        }
      }
      
      .MyStickMenu {
        border:1px solid blue;
        background-color:#eef;
        position: sticky;
        top: 0;
        
      }
    }

    .SideTwo {
      background-color:#ddd;
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}

<div >

  <div >

    <div >

      <div >
        <img src="https://via.placeholder.com/250x100.png" alt="" />
      </div>

      <div >
        <h2>
          Not-so Sticky Menu
        </h2>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Away</a>
          </li>
        </ul>
      </div>

    </div>

    <div >

      <h1>
        Scrollable page
      </h1>

      <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
      
    </div>

  </div>
</div>

CodePudding user response：

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.