如何实现父Div高度适配子元素，隐藏绿色背景区域？

问题分析 #

父容器（原绿色背景）无法适配红色子元素的高度，核心原因是**transform仅做视觉缩放，不会改变元素的实际盒模型尺寸**，父容器无法感知子元素缩放后的真实高度，导致绿色背景区域暴露。

解决方案 #

通过调整缩放的作用层级，让父容器正确识别子元素的布局尺寸，同时隐藏多余的绿色背景：

1. 将缩放效果从红色子元素转移到它的直接父容器上，使该容器的布局尺寸直接变为缩放后的大小，父容器可自动适配其高度
2. 给父容器添加overflow: hidden，确保超出区域被隐藏
3. 移除父容器的绿色背景（或让父容器尺寸完全匹配子元素，自然隐藏绿色）

修改后的完整代码：

<style>
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
.section {
  padding: 20px 0;
  position: relative;
}
.style_content {
    color: #27272a;
    max-width: 700px;
    position: relative;
    text-align: center;
    z-index: 9;
}
</style>

<div id="parent" style="position: relative; direction: rtl; width: fit-content; overflow: hidden;">
    <div style="width: 1400px; transform-origin: right top; transform: scale(0.2);">
        <div id="child" style="background: red;">
            <section class="section">
                <div class="style_content container">
                    <div><h1>Hello</h1></div>
                     <div><p>that is for test.that is for test.that is for test.that is for test.that is for test.
                     that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.</p></div>
                    <a href="#" target="_blank">click me</a>
                </div>
            </section>                  
        </div>
    </div>
</div>

关键调整说明 #

• 把红色子元素的宽高和缩放属性移到其父容器后，该容器的布局尺寸会按缩放比例自动计算，父容器#parent设置width: fit-content可自动适配宽度，高度随内容撑开
• 用scale(0.2)替代matrix(0.2,0,0,0.2,0,0)，效果一致但更直观易读
• overflow: hidden确保父容器不会显示超出子元素区域的内容

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