Bootstrap5中实现列等高并阻止子元素撑大父元素求助

我希望在Bootstrap 5中让第二列与第一列保持等高，但当前第二列的子元素内容超出初始尺寸时，会撑大父div，进而拉长页面内容。我的代码如下：

<div className="row g-2">
    <div className="col-md-5">
        <div className='border border-primary border-4 bg-secondary' style={{ height: 400 + "px" }}></div>
    </div>
    <div className="col-md-7">
        <div className='border border-primary border-4 bg-dark p-2 h-100 overflow-auto'>
            <div className="bg-danger" style={{ height: 800 + "px" }}>
                <span className="text-white fs-1">Hello World </span>
            </div>
        </div>
    </div>
</div>

当前问题：第二列因内部高内容被撑长，超过第一列的400px高度
期望效果：第二列高度与第一列保持一致（400px），内部超出内容通过滚动条查看

核心是给第二列的父容器（col-md-7）设置固定高度，让内部的滚动容器基于这个高度填充，避免被内容撑大。

修改后的代码 #

<div className="row g-2">
    <div className="col-md-5">
        <div className='border border-primary border-4 bg-secondary' style={{ height: "400px" }}></div>
    </div>
    <div className="col-md-7" style={{ height: "400px" }}>
        <div className='border border-primary border-4 bg-dark p-2 h-100 overflow-auto'>
            <div className="bg-danger" style={{ height: "800px" }}>
                <span className="text-white fs-1">Hello World </span>
            </div>
        </div>
    </div>
</div>

灵活优化方案（用CSS变量） #

如果不想硬写400px，可以用CSS变量统一控制高度，方便后续修改：

<div className="row g-2">
    <div className="col-md-5">
        <div className='border border-primary border-4 bg-secondary' style={{ height: "400px", "--col-height": "400px" }}></div>
    </div>
    <div className="col-md-7" style={{ height: "var(--col-height)" }}>
        <div className='border border-primary border-4 bg-dark p-2 h-100 overflow-auto'>
            <div className="bg-danger" style={{ height: "800px" }}>
                <span className="text-white fs-1">Hello World </span>
            </div>
        </div>
    </div>
</div>

原理说明 #

之前的代码中，h-100是让元素高度等于父元素的100%，但col-md-7默认没有固定高度，会被内部内容撑开，导致h-100跟着内容变高。给col-md-7设置固定高度后，内部的滚动容器就能填满这个高度，超出的内容通过overflow-auto生成滚动条，不会再撑大父元素。

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