如何防止Bootstrap Collapse在overflow-y-scroll容器中溢出？

问题出在滚动容器的高度设置逻辑上：你使用了Bootstrap的h-75类，但这个类是相对于父元素高度的75%，如果父元素（.container.mw-25）没有设置明确高度，h-75会被解析为height: auto，容器会被内部内容完全撑开，导致overflow-y-scroll无法生效，Collapse展开后内容直接溢出容器边界。

修复方案 #

给滚动容器设置固定高度（或确保父元素有明确高度），让overflow-y-scroll能正确触发内部滚动：

方法1：直接给滚动容器设置固定高度

修改外层滚动容器的类，将h-75替换为Bootstrap内置的固定高度类（如h-96，对应24rem），或自定义高度值：

<div class="container mw-25">
    <div class="text-start text-white px-4">Knowledge Requirements</div>
    <!-- 外层滚动容器：替换h-75为固定高度类h-96，保留overflow-y-scroll -->
    <div class="bg-white w-100 h-96 mt-2 mx-3 border rounded-2 rounded-end-0 p-2 overflow-y-scroll">
        <div class="form-check">
            <input class="form-check-input shadow-none text-start" type="checkbox" value="" id="flexCheckDefault">
            <a class="btn-sm w-50 text-dark no-hover pb-1 fw-semibold text-decoration-none bg-transparent" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Writing  <span class="badge bg-secondary rounded-pill">Show</span>
            </a>
            <div class="collapse" id="collapseExample">
                <label class="p-2 form-check-label border-bottom text-small text-wrap" for="flexCheckDefault">
                    <span class="fw-semibold">A:</span> blurred for privacy reasons
                </label>
                <label class="p-2 form-check-label border-bottom text-small text-wrap" for="flexCheckDefault">
                    <span class="fw-semibold">C:</span> blurred for privacy reasons
                </label>
            </div>
        </div>
        <div class="form-check">
            <input class="form-check-input shadow-none text-start" type="checkbox" value="" id="flexCheckChecked" checked>
            <label class="form-check-label" for="flexCheckChecked">
                Checked checkbox
            </label>
        </div>
    </div>
</div>

方法2：给父元素设置明确高度，保留h-75

如果需要滚动容器高度随父元素变化，给.container.mw-25添加固定高度类，让h-75能基于父元素高度计算：

<div class="container mw-25 h-[500px]">
    <div class="text-start text-white px-4">Knowledge Requirements</div>
    <!-- 外层滚动容器：h-75会基于父元素的500px计算高度 -->
    <div class="bg-white w-100 h-75 mt-2 mx-3 border rounded-2 rounded-end-0 p-2 overflow-y-scroll">
        <!-- 内部内容保持不变 -->
    </div>
</div>

关键原理 #

overflow-y-scroll只有在容器拥有明确的固定高度/最大高度时才会生效——当容器内容高度超过自身高度时，会自动显示滚动条。之前使用h-75但父元素无高度，容器高度随内容动态变化，自然无法触发滚动逻辑。

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