防止孩子调整父母的大小

Question

我允许自己张贴我的问题，因为我找不到解决办法，我开始拔出我的头发。

我想使我的第二栏的高度与我的第一栏相同。

关注的是，由于内容大于初始大小，因此会增大父div，从而增加页面的内容。

我指定使用Boostrap 5

我的代码：

    <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>

所讨论的问题

这是我想要的

Answer 1

将固定高度添加到父元素可以是一个解决方案。也不要忘记溢出类的父母。

     <div className="row g-2 overflow-hidden" style={{ height: '400px' }}>
        <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>

更新：

我真正想要的是，第二列和第一列的高度是相同的(它的高度与内容是自动的)。

您可以通过创建第二列relative及其子absolute来实现这一点。还将顶部、底部、左侧和右侧添加到0

      <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 position-relative">
          <div className="border position-absolute top-0 start-0 end-0 bottom-0 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>