我目前正在使用Bootstrap 5创建一个Shopify主题，我一直在Macbook上使用谷歌Chrome进行构建和测试。
以下是相关代码：
<body class="template-{{request.page_type | handle}} d-flex flex-column vh-100">
{% section 'header' %}
<div role="main" class="container-fluid flex-grow-1" id="mainContainer">
<div class="row h-50" id="customize">
Hello
</div>
</div>
</body>
这个问题的相关CSS都是普通的Bootstrap5，所以我不会麻烦发布它。在代码中，您可以看到我有一个具有引导类d-flex flex-column vh-100的主体，因此它是一个具有列方向的灵活项，占据了视口的100%。在这个文件中，我们有一个占用动态空间的头，然后是一个包含其余内容的div。此div具有flex-grow-1类，因此它将占据标头之后视口的其余部分。
在这个容器中，我有一行，带有引导大小调整实用程序类h-50，这意味着容器使用的剩余视口的50%应该是该行。在我一直用来线框的桌面版谷歌Chrome中，你可以看到预期的输出：桌面的chrome网站
然而，我在许多其他设备上查看了该网站(Chrome适用于移动设备，Safari适用于移动和桌面设备(，结果我看到的是该行没有调整大小。我正在使用开发人员工具，并看到引导程序仍在加载中(h-50类仍在应用中(。此外，容器仍然是弹性增长的，我通过将其背景色设置为红色进行了检查，但是由于某些原因，子行没有调整容器50%的大小：桌面的safari网站
我使用的是我使用的所有浏览器的最新版本，所以我对发生的事情有点困惑。请随意查看网站，它位于me-marcel-dev.myshopify.com，访问代码为breert。谢谢你的帮助。可以提供。
编辑：我正在把它缩小到一些带有flex grow的行为，尽管我仍然不太确定它为什么会这样。
将flex基准设置为100%似乎可以达到目的。我从https://css-tricks.com/snippets/css/a-guide-to-flexbox/