Как сделать так, чтобы фиксированный элемент оставался в пределах видимых границ родителя с помощью CSS?

Это мой макет, желтая часть исправлена. Я сделал простой скрипт, чтобы сделать боковую панель сжатой/растущей так, чтобы она никогда не переходила через зеленый нижний колонтитул, возможно ли добиться этого только с помощью CSS?

Смотрите здесь в действии: http://jsfiddle.net/RWxGX/203/

Я сделал простой сценарий jquery, чтобы фиксированная желтая боковая панель сжималась, когда зеленая часть поднималась при прокрутке окна

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');
  })
})