Bootstrap 5嵌套Flex布局中<canvas>拉伸填充Flex项却出现滚动条的问题求助

这个问题其实不是Bootstrap的Bug，而是CSS Flexbox默认行为在column布局下容易被忽略的细节，我来帮你拆解原因和解决方案：

问题根源 #

在Flex Column布局中，设置了flex-grow: 1的容器默认min-height: auto——这个属性会让容器的高度至少要能容纳子元素的「内在尺寸」（intrinsic size）。而<canvas>作为替换元素，默认的内在高度是150px，即便你给它加了w-100 h-100工具类，这个height:100%是相对于父容器（<main>）的高度，但<main>的高度又被canvas的内在高度反向撑开，形成循环，最终导致整个页面高度超出视口，出现垂直滚动条。

解决方案 #

只需要给包含canvas的<main>元素添加min-height: 0，打破这个循环，让它严格遵守Flex容器的高度限制即可。因为Bootstrap没有现成的min-height:0工具类，你有两种选择：

方案1：内联样式快速修复 #

直接给<main>添加内联样式：

<main class="flex-grow-1 bg-dark" style="min-height: 0;">
  <canvas class="d-block w-100 h-100"></canvas>
</main>

方案2：自定义工具类（推荐，更符合Bootstrap风格） #

在你的CSS中添加一个自定义工具类：

.flex-min-h-0 {
  min-height: 0;
}

然后给<main>应用这个类：

<main class="flex-grow-1 bg-dark flex-min-h-0">
  <canvas class="d-block w-100 h-100"></canvas>
</main>

额外说明 #

这个问题和row布局中出现的水平滚动条原理类似，只是row布局触发的是min-width: auto的默认行为，而column布局是min-height: auto。只要是嵌套的Flex容器，当子元素需要完全填充父容器且可能存在内在尺寸时，都需要给flex-grow的容器设置对应的min尺寸为0，才能让布局正常收缩。

内容的提问来源于stack exchange，提问作者Rabadash8820