Keep an element at bottom of div while keeping it in the flow

Question

I am looking to keep an element at the bottom of a sidebar. To achieve that, one of the easiest solution would be:

  #container
  {
    position: relative;
    height: 100%;
  }

  #bottom-element
  {
    position: absolute;
    height: 20px;
    bottom: 0;
  }

The result of this code is going to be:

However, I also need to keep the sidebar responsive. And since an absolute position removes the #bottom-element from the flow, if the sidebar's height becomes too small, the #bottom-element is going to cover the blue elements, instead of creating a scrollbar.

So my question is:
How to keep the red element at the bottom of the sidebar, while keeping it at the bottom of the blue elements list when the sidebar is not tall enough?

Answer 1

Just add some bottom padding to the container equal to the height of the absolutely positioned element:

 #container
  {
    position: relative;
    height: 100%;
    padding-bottom:20px;
    box-sizing: border-box;
  }

  #bottom-element
  {
    position: absolute;
    height: 20px;
    bottom: 0;
  }

Update you might also want to add box-sizing: border-box to stop the padding being added to the 100% height. I've updated the CSS with this.