固定高度父容器内动态子元素的布局适配问题

修改后的CSS代码 #

div {
    display: block;
    unicode-bidi: isolate;
}
tr {
    outline: 1px solid purple; /* Addition for demo */
}

.container {
    height: 750px; /* Fixed */
    left: 304px; /* CollapsiblePanel 300 + vLine 4 ... */
    outline: 1px solid red; /* Addition for demo */
    position: absolute;
    width: calc(100% - 304px); /* 确保容器宽度适配剩余空间 */
}
.title {
    color: #BC1212;
    font-family: "Lucida Sans Unicode", sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
}
.tabs {
    background-color: darkseagreen; /* Addition for demo */
    height: 33px;
    position: relative;
    white-space: nowrap; /* 修正原代码的拼写错误 */
    width: 100%;
}
.content {
    background-color: lightblue; /* Addition for demo */
    min-height: 200px; /* 替换固定高度为最小高度，可按需调整 */
    overflow: auto;
    flex: 1; /* 自动填充容器剩余垂直空间 */
}
.hLine {
    border-bottom: 1px solid #888;
    height: 1px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.CollapsibleContainer {
    height: 750px; /* Fixed */
    position: relative;
}
.CollapsiblePanel {
    background-color: AliceBlue;
    line-height: 750px; /* Addition for demo */
    position: absolute;
    text-align: center; /* Addition for demo */
    vertical-align: middle; /* Addition for demo */
    width: 300px;
}
.vLine {
    border-left: 1px solid #888;
    height: 100%;
    left: 300px;
    overflow: hidden;
    position: absolute;
    width: 4px; /* Fixed */
}

/* 新增核心样式 */
.container table {
    height: 100%;
    width: 100%;
    table-layout: fixed; /* 稳定表格布局，避免列宽波动 */
}
.container table tr:nth-child(2) {
    height: 100%; /* 让包含内容区域的表格行填充剩余高度 */
}
.container table tr:nth-child(2) td > div {
    display: flex;
    flex-direction: column;
    height: 100%; /* 让内容容器使用flex垂直布局 */
}

核心逻辑说明 #

1. 让表格填满父容器：给.container table设置height:100%，确保表格完全占满750px高的父容器。
2. 分配表格行高度：将包含内容区域的第二行表格行设为height:100%，它会自动填充标题行和按钮行之外的剩余空间。
3. Flex布局实现内容自适应：给内容区域的外层div设置display:flex和flex-direction:column，让内部的.tabs（固定33px）、.content（flex:1自动填充）、.hLine（固定1px）垂直分布，.content会自动拉伸填满剩余空间，同时保留min-height避免内容过少时高度塌陷。
4. 滚动逻辑保留：.content的overflow:auto确保内容超出最小高度时自动显示垂直滚动条，不会挤压底部按钮或溢出父容器。

效果验证 #

• 当.content内容较少时，会自动填充空白，底部按钮保持在父容器底部。
• 当内容超出.content的最小高度时，自动出现滚动条，所有元素都不会溢出750px高的父容器。
• 完全符合约束条件：未修改任何HTML结构，父容器固定750px高度保留。

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