如何让main div适配内容而非撑开？解决transform缩放导致的高度溢出

你遇到的问题是：#main的红色背景被过度撑开，没有适配缩放后内容的实际高度。原因在于内部带transform缩放的元素，虽然视觉上缩小了，但它在文档流中仍然占据原始尺寸的空间（1400px宽+内容原始高度），外层容器会根据这个原始尺寸计算高度，导致红色区域超出内容范围。

直接按下面的方式修改代码即可解决：

• 给class为rtl的内层div添加position: absolute; right: 0; top: 0;，让它脱离文档流，父容器不再以它的原始尺寸计算高度
• 将matrix缩放替换为更直观的transform: scale(0.2);（效果完全一致）
• 给#main设置height: fit-content;，确保它的高度自动匹配缩放后内容的实际高度

修改后的完整代码：

<div id="main" style="margin-top:10px;cursor: pointer; width: 280px; border-radius: 7px;overflow: hidden; position: relative; background-color:#F00; border:3px solid #000; direction: rtl; height: fit-content;">
  <div style="width: 280px; position: relative;">
    <div class="rtl" style="width: 1400px; background-color: rgb(255, 255, 255); transform-origin: right top; transform: scale(0.2); position: absolute; right: 0; top: 0;">
      <section class=" ">
        <div class="container">
          <div class="row">
            <div class="col-md-6 ">
              <div >
                <div ><h2>Hello</h2></div>
                <div><p>You are welcome </p></div>
              </div>
            </div>
            <div class="col-md-6 ">
              <div class="">
              <img src="images/hello.jpg">
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

这样修改后，#main的红色背景会完美包裹缩放后的内容，不会再被过度撑开。

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