如何使用CSS使固定元素停留在父对象的可见边界内？

Question

This is my layout, yellow part is fixed. I made a simple script to make the sidebar shrink/grow so that it never goes over the green footer, is it possible to achieve the same with CSS only?

See it in action here: http://jsfiddle.net/RWxGX/203/

I made a simple jquery script so that the fixed yellow sidebar shrinks when the green part goes up when scrolling the window

HTML, CSS, JS:

<div id="content">
  <div id="sidebar">
    <div id="sidebar-container">
      <div id="sidebar-wrapper">
        <div id="sidebar-content">
          height: 300px
        </div>
      </div>
    </div>
  </div>
  <div id="article">
    Scroll me to see the sidebar shrink
  </div>
</div>
<div id="footer">

</div>

body {
  padding: 0;
  margin: 0;
  min-height: 100%;
}
#content {
  display: flex;
  justify-content: stretch;
}

#sidebar {
  height: inherit;
  width: 100px;
  flex: 0 0 auto;
  background-color: red;
}

#article {
  background-color: orange;
  flex-grow: 1;
  font-size: 55px;
}

#sidebar-container {
  position: fixed;
  max-height: 100%;
  height: inherit;
  width: inherit;
  background-color: red;
  display: flex;
  flex-direction: column;
}

#sidebar-wrapper {
  background-color: yellow;
  overflow-y: scroll;
}

#sidebar-content {
  background-color: rgba(255, 0, 0, 0.1);
  height: 20000px;
}

#mainbar {
  background-color: blue;
}

#content {
  height: 300px;
  width: 500px;
  background-color: rgba(255, 255, 255, 0.75);
}
#footer {
  height: 2000px;
  width: 500px;
  background-color: green;
}

$(document).ready(function() {
    var sidebar_container = $('#sidebar-container');
  var sidebar_content = $('#sidebar-content');
  var footer = $('#footer');
  $(window).scroll(function () {
    sidebar_container_height = 
        Math.max(
        Math.min(
            footer.offset().top - $(window).scrollTop(),
          $(window).height()),
      0);
    sidebar_container.css('height', sidebar_container_height + 'px');
    sidebar_content.text('height: ' + sidebar_container_height + 'px');
  })
})

Answer 1

I think that in some cases it can be solved using position:absolute;z-index:999 on #footer . But this causes footer to cover sidebar, not to resize sidebar.