Twitter bootstrap Flexbox，CSSGrid的奇怪行为

我有这样的情况：

在Chrome上运行良好，请参见：

它将启动（请参阅“第一个”和“最后一个”btn）。好

在Safari上，它看不到以下内容（iPad/iPhone也是如此）：

“第一个”没问题，“最后一个”没问题。这个页面有一个滚动条，这是我不想要的

如果我去掉头部部分，效果会很好，所以我猜Safari可能不会识别（

高度：100vh

减去该高度的头部部分）。 我是对的？

代码：

测试空间长
第一

Safari的

vh

装置存在已知问题。它读错了。因此，您可以使用jQuery查询

$（窗口）。height（）

等于100VH这似乎是Safari的一个错误。无论出于何种原因，按钮元素都会溢出父元素，父元素顽固地拒绝扩展以容纳它们。可能是引导、网格和Flex之间的冲突。无论什么这太糟糕了。我尝试了45种不同的调整。什么都没用。请参阅返回到/1/版本。总是在铬上工作。从来没有在Safari。如果有人看到我错过了什么，请张贴和回答，或只是让我知道。希望这不是一件超级简单的事情，因为那真的很糟糕。抱歉@JohnSam，我试过了。祝你好运。这一切都很可悲。我们可以为Safari打开一个bug吗？到哪里去？如果你简单地放下

包装器怎么办。。。Safari的

vh

装置存在已知问题。它读错了。因此，您可以使用jQuery查询

$（窗口）。height（）

等于100VH这似乎是Safari的一个错误。无论出于何种原因，按钮元素都会溢出父元素，父元素顽固地拒绝扩展以容纳它们。可能是引导、网格和Flex之间的冲突。无论什么这太糟糕了。我尝试了45种不同的调整。什么都没用。请参阅返回到/1/版本。总是在铬上工作。从来没有在Safari。如果有人看到我错过了什么，请张贴和回答，或只是让我知道。希望这不是一件超级简单的事情，因为那真的很糟糕。抱歉@JohnSam，我试过了。祝你好运。这一切都很可悲。我们可以为Safari打开一个bug吗？到哪里去？如果你简单地放下

包装器怎么办。。。

<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>