Bootstrap 5 大小调整实用程序 / flexbox 错误答案

【问题标题】：Bootstrap 5 sizing utility / flexbox bugBootstrap 5 大小调整实用程序 / flexbox 错误
【发布时间】：2020-12-28 09:10:02
【问题描述】：

我目前正在使用 Bootstrap 5 创建 Shopify 主题，我一直在 Macbook 上使用 Google 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 都是 vanilla Bootstrap5，所以我不会费心发布它。在代码中，您可以看到我有一个具有引导类 d-flex flex-column vh-100 的主体，因此它是一个列方向的弹性项目，占据了 100% 的视口。在这里面我们有一个占据动态空间的标题，然后是一个包含我其余内容的 div。此 div 具有 flex-grow-1 类，因此它将占据标题之后的其余视口。

在这个容器中，我有一个单独的行，使用引导调整实用程序类h-50，这意味着容器使用的剩余视口的 50% 应该是行。在我一直用于线框的桌面版 Google Chrome 中，您会看到预期的输出： website in chrome for desktop

但是，我在许多其他设备（移动版 Chrome、移动版和桌面版 Safari）上查看了该网站，我看到的结果是该行没有调整大小。我正在使用开发人员工具并看到引导程序仍在加载（h-50 类仍在应用中）。此外，容器仍在弹性增长，我通过将其背景颜色设置为红色进行了检查，但是由于某种原因子行没有调整容器的 50%： website in safari for desktop

我正在使用我使用的所有浏览器的最新版本，所以我对发生的事情有点困惑。请随意查看该网站，它位于 me-marcel-dev.myshopify.com，访问代码为 breert。感谢您对您的任何帮助。或许可以提供。

编辑：我将其缩小到 flex-grow 的某些行为，尽管我仍然不太确定它为什么会这样。

【问题讨论】：

标签： html css flexbox bootstrap-5

【解决方案1】：

将 flex-basis 设置为 100% 似乎可以解决问题。我从https://css-tricks.com/snippets/css/a-guide-to-flexbox/得到了答案

【讨论】：