如何让div容器高度适配内容并保留滚动功能？

问题根源 #

1. 黑色容器（#container）被行内样式强制设置了height:200px，覆盖了height:auto，导致高度被固定，出现多余黑色区域。
2. 绿色区域（child1-child5）设置了height:0，且内部内容通过matrix变换缩放——CSS变换不会影响元素的布局尺寸，父容器无法感知到缩放后的实际内容高度，导致高度无法自适应。
3. Flex布局属性存在重复定义，可能引发布局冲突。

具体修改步骤 #

• 移除容器固定高度：删除#container行内样式中的height:200px，保留height:auto，让容器基础高度由内容决定。
• 修复子元素高度设置：删除child1-child5行内样式中的height:0，去掉多余分号，让这些元素能根据内部内容自适应高度。
• 替换缩放方式（更优方案）：将matrix变换改为直接设置元素的实际尺寸（原宽度1400px，缩放0.2后为280px），这样父元素能正确计算内容高度，避免变换导致的布局尺寸不更新问题。如果必须使用transform，则需要通过JS计算缩放后的高度并设置给父元素，但直接修改尺寸更简单可靠。

修改后的完整代码 #

<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;
}
.sidebar_panel {
    display: flex;
    flex: 0 1 auto;
    float: right;
    width: fit-content;
    overflow-y: auto; /* 保留滚动功能，内容超出时自动显示滚动条 */
}
.panel2 {
    display: flex;
    flex: 1;
    width: fit-content;
}
</style>

<div id="container" style="height:auto;background-color:#000;" class="sidebar_panel panel2">
    <div style="-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:300px; margin:0;">
                            
        <div id="child1" style="padding:0px;background-color:green; position: relative; direction: rtl;width:100%;min-height:40px;">
            <div style="width: 280px;">
                <div id="child" style="background:red;flex: 0 0 auto; width: 280px;">
                    <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>

        <div id="child2" style="padding:0px;background-color:green; position: relative; direction: rtl;width:100%;min-height:40px;">
            <div style="width: 280px;">
                <div id="child" style="background:red;flex: 0 0 auto; width: 280px;">
                    <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>  

        <div id="child3" style="padding:0px;background-color:green; position: relative; direction: rtl;width:100%;min-height:40px;">
            <div style="width: 280px;">
                <div id="child" style="background:red;flex: 0 0 auto; width: 280px;">
                    <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>  

        <div id="child4" style="padding:0px;background-color:green; position: relative; direction: rtl;width:100%;min-height:40px;">
            <div style="width: 280px;">
                <div id="child" style="background:red;flex: 0 0 auto; width: 280px;">
                    <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>
        <div id="child5" style="padding:0px;background-color:green; position: relative; direction: rtl;width:100%;min-height:40px;">
            <div style="width: 280px;">
                <div id="child" style="background:red;flex: 0 0 auto; width: 280px;">
                    <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>                                  
    </div>  
</div>

效果说明 #

• 黑色容器现在会完全适配绿色区域的高度，底部不再有多余黑色区域。
• 当绿色区域内容过多超出容器视口时，overflow-y: auto会自动显示滚动条，保留滚动功能。
• 直接设置子元素尺寸替代transform缩放，确保父容器能正确计算内容高度，避免布局异常。

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