Set height of child to height of parent

So, I am trying to create the following grid/table layout:

.grid-column {
  display: table-cell;
  height: 100%;
  min-height: 100%;
}
.grid-column .grid-column-content {} .wireframe {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div class="wireframe" style="display: inline-block;">
  <div class="grid-column red">
    <div class="grid-column-content" style="margin: 5px;">
      <span>Some content</span>
      <br/>
      <span>More content</span>
      <br/>
      <span>Some more content</span>
      <br/>
      <span>Even more content!!!</span>
    </div>
  </div>
  <div class="grid-column green" style="min-width: 300px;">
    <div class="grid-column-content blue" style="margin: 5px;">
      Hi
    </div>
  </div>
</div>

Essentially, it's two (or more) divs that are set to display as table-cell. Inside the div(s) can be any kind of content.

Example: The left div contains a larger amount of content and is responsible for the height of the container div. The right div has a smaller amount of content and it does not fill the entire height. Even if the height is set to 100% for the right content, it still does not fill.

It should look like this:

I achieved the look above by using absolute positioning, but using absolute positioning, the content is taken out of the layout system and it doesn't resize the parent if it becomes the larger content.

So I can't:

• Use absolute positioning
• Set the height of the 'table' div (top level div in the example)
• Set any kind of fixed heights anywhere!
• Use CSS3 Flexbox (must be compatible with early browsers)

Why is this so hard to do in CSS? This is like Layout 101.

Does anyone know of a solution? Thanks for reading.