CSS Height:100% not working on Table inside Flexbox Child

I have a CSS table inside a flexbox child. The height of that table is set to 100%, but it doesn't work.

You can see in the Codepen that the greenbox is only stretched horizontally, but not vertically.

I've seen the similar question. However, once I place a CSS table inside a flexbox child it also stops working.

Interestingly, the problem affects Chrome, but not IE11.

CodePen

HTML:

<div class="flex-box">
  <div class="flex-child">
    <div class="wrapper">
      <div class="table">
        <div class="table-cell">
          Hello
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.flex-box {
  width: 500px;
  height: 500px;
  background-color: lightblue;
  display: flex;
}

.flex-child {
  flex-grow: 1;
}

.wrapper {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.table {
  height: 100%;
  width: 100%;
}

.table-cell {
  height: 100%;
  width: 100%;
  background-color: green;
  text-align: center;
}