How to "nail" an element to the bottom of scrollable window

Issue

I am trying to create a scrollable side menu, where a specific text is supposed to stay at the right bottom.

The number of elements in this side menu can change - like clicking on an element will show all sub-elements - so the height of the menu will grow.

The maximum height is not limited in any way.

What I want - if the number of menu elements is small, and no scrolling is required, then the text should be bottom right.

If there are enough elements to make menu scrollable, it should appear after them all, below everything else.

About like this:

I don't think anything about html should be shown here, it's just two divs.

<div className={styles.sideMenu}>
    // menu elements
</div>

<div className={styles.bottomElement}>
    // menu elements
</div>

I believe css is important here.

.sideMenu
{
    height: auto;
    position: sticky;
    bottom: 50px;
}

.bottomElement
{
  bottom: 2px;
  right: 32px;
  position:sticky;
  height: 34px;
}

For bottom element, bottom and right are a must. It must stay in this position. I believe it also should have a fixed height.

But I don't know how I should define position values for both. I tried playing with absolute-relative-static-sticky-... but in all cases, either the element stays down if the menu is long, but goes up if the menu is short (just under option2 on leftmost example), or it stays on fixed position and overlaps with menu items.

Also I am not sure what should be the menu height. Should be be fixed with pixels/vh or percents? Or auto?

Solution

As per my comment you can use flex with sticky positioning:

.row {
  display: flex;
  gap: 20px;
}

.option-holder {
  line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 6.5rem;
  overflow: auto;
  width: 100px;
  position: relative;
  border: 1px solid black;
}

.option-holder__top {
  flex-grow: 1;
}

.option-holder__bottom {
  position: sticky;
  bottom: 0;
  background: white;
}

<div class="row">
  <div class="option-holder">
    <div class="option-holder__top">
      <div>Option</div>
      <div>Option</div>
    </div>
    <div class="option-holder__bottom">
      version
    </div>
  </div>
  <div class="option-holder">
    <div class="option-holder__top">
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
    </div>
    <div class="option-holder__bottom">
      version
    </div>
  </div>
  <div class="option-holder">
    <div class="option-holder__top">
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
      <div>Option</div>
      <div>Option 8</div>
    </div>
    <div class="option-holder__bottom">
      version
    </div>
  </div>
</div>

Answered By - Pete