In css grid with 1 row & 2 columns: left cell's height should set parent height, right cell should get scroll bar

Question

Consider the setup underneath.

I want the parent grid container (the gray box) to be the height of the red cell; the gray box should be able to stretch according to the size of the red box.

Additionally, the blue box on the right should not stretch the grey grid container. In order to achieve that, the green cell should get a scroll bar to fit the blue box. Currently the scroll bar does not appear.

What can I do? Please help!

If you come up with a solution other than using grid, I'am fine!

here is the jsfiddle: http://jsfiddle.net/khwo1yvn/

.black {
  width: 200px;
  height: 150px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grey {
  width: 90%;
  height: 90%;
  background: grey;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;

}

.red {
  background: red;
  height: 100px;
}

.green {
  height: 100%;
  width: 90%;
  background: green;
  overflow: visible;
}

.blue {
  background: blue;
  height: 180px;
  width: 80%;
}

<div class="black">
  <div class="grey">
    <div class="red">red</div>
    <div class="green">
      <div class="blue">blue</div>
    </div>
  </div>
</div>