在flexbox内的div内部网格无法填充Safari中的空间

Question

flexbox div中的一个 grid div，使得div中包含height: 100%的div会填充Safari中的最大可用空间。

是否有解决方法/解决方案？

Chrome 78.0.3904.108

Firefox 70.0.1

Safari 12.1.1

.one {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  background-color: blue;
}

.two {
  display: grid;
}

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

<div class="one">
  <div class="two">
    <div class="three">
        Hello
    </div>
  </div>
</div>