html - スクロール可能な div の上に div を追加すると、スクロール バーがページの高さより下に押し出されます

Question

ページの下部からその div を押し出さずに、スクロール可能な div の上に HTML 要素を追加するのに問題があります。明らかに 100% の高さの問題ですが、解決方法は不明です。

http://codepen.io/establish/pen/lCGwn

HTML

<div class="container">

  <div class="stream page">
    <div>THIS IS A DIV</div>
    <div>THIS IS ANOTHER DIV</div>
    <div class="stream-content">
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio libero, posuere in tortor quis, malesuada ullamcorper ante. Morbi sed orci nisi.</h2>

      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio libero, posuere in tortor quis, malesuada ullamcorper ante. Morbi sed orci nisi.</h2>

      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio libero, posuere in tortor quis, malesuada ullamcorper ante. Morbi sed orci nisi.</h2>
    </div>
  </div>

  <div class="detail page">
  </div>

</div>

CSS

.container {
  background-color: pink;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
}

.detail {
  background-color: blue;
  left: 425px;
}

.stream {
  background-color: green;
  width: 425px;
}

.stream-content { 
  overflow-y: scroll;
   height: 100%;
}