Issue with position sticky & bottom with different height flex children-CodePudding

I have a flex container with two children of different height.

The left item is shorter which I'm trying to make stick to the bottom while scrolling until the full container has been scrolled so they both align. Can't seem to get this to work. No parent overflows affecting this.

The desired behaviour is for the viewer(left) element to align at the top, scroll until it reaches the bottom, stick there until the full container (and side rail) has scrolled

Sandbox Here

.wrapper {
  padding: 2rem;
  background: lightgrey;
}
.container {
  margin-inline: max(0px, ((100% - 1440px) / 2));
  display: flex;
  height: 2220px;
  gap: 1rem;
  
  > * {
    border: 1px solid;
  }
}

.viewer {
  height: 1400px;
  flex-grow: 3;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: white;
}

.side-rail {
  height: 2190px;
  flex-grow: 1;
  background: white;
}

html,
body {
  margin: 0;
}

<div >
  <div >
    <div >Viewer</div>
    <div >Side rail</div>
  </div>
</div>

CodePudding user response：

Does making the the 'viewer' div

align-self: flex-end;

instead of flex-start do what you require ?

CodePudding user response：

Seems like you have to make both the .viewer and the .side-rail of same height and overflow: auto the content within the side-rail