使div填写父div的剩余垂直空间

Question

我有以下代码。我需要绿色div来始终调整其高度，以便填充红色div中的剩余空间。由于其他功能，我无法使用绝对定位。我尝试使用高度：100％，但它不起作用。Here is the demo.

以下是代码：

<div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
       <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
      <div id="yellow">I am yellow</div>
      <div id="green"><div id="white-border">
      i am blue
      </div></div>

      </div>

      </div>




    #container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: right;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#yellow {
height: 20vw;
  width: 50%;
  background-color: yellow;

}

#green {
height: 100%;
  background-color: green;

}

#white-border {
width: 50%;
height: 5vw;
border: 1px solid white;

}