twitter-bootstrap - Flexbox，CSSGrid 的奇怪行为

Question

我有这种情况：https ://jsfiddle.net/johnsam/rdtva2fq/

在Chrome上效果很好，请参见：

它开始（参见“FIRST”和“LAST”btn）。好的。

在Safari上它没有（iPad/iPhone 也一样）看到这个：

“FIRST”btn OK，“LAST”一个不。该页面有一个滚动条，这是我不想要的！

如果我删除标题部分效果很好，所以我的猜测是 Safari 可能无法识别（height: 100vh减去该高度的标题部分）。我是正确的？

代码：

<div class="my-all d-flex flex-column height100">
  <div class="container-fluid" style="background: red;">
    <div class="row">
      <div class="col-12 my-5">
        Test space long long long
      </div>
    </div>
  </div>
  <div class="my-main d-flex height100" style="background: cyan;">
    <div class="container-fluid d-flex media-body">
      <div class="row my-row my-3">
        <div class="col-6 my-grid">
          <a class="btn btn-secondary my-btn">
            <span>FIRST</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>