Align DIVs with overflow: auto

Issue

I have a list of items, and at the bottom of the list I have a placeholder-item to add it to list above. In my real-life-example I need to show a "+"-icon at the right side. As the scrollbar appears and disappears depending on how many items are in the list, the right side of the DIVs are sometimes not aligned.

I tried to show that with the red and green color. I know I could just give the green DIV a padding; but if the scrollbar is not showing, then the "+"-icons will not be aligned again.

How can I solve this?

<div style="width: 200px;">
  <div style="height: 100px; overflow: auto; background-color: red;">
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
  </div>
  <div style="background-color: green;">
    <div>Footer Item</div>
  </div>
</div>

Solution

I was able to solve the issue by moving the footer DIV into the overflow-container and then using position: sticky:

<div style="width: 200px;">
  <div style="max-height: 100px; overflow: auto; background-color: red; position: relative;">
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div style="background-color: green; position: sticky; bottom: 0;">
      <div>Footer Item</div>
    </div>
  </div>
</div>
<br><br>
<div style="width: 200px;">
  <div style="max-height: 100px; overflow: auto; background-color: red; position: relative;">
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div style="background-color: green; position: sticky; bottom: 0;">
      <div>Footer Item</div>
    </div>
  </div>
</div>

Answered By - NoRyb