如何让div占据height为fit-content且带max-height的父元素剩余高度？

问题分析 #

当父元素设置height: fit-content + max-height时，直接给子元素设置height:100%不会生效——因为百分比高度需要父元素有明确的计算后高度值，而fit-content由内部内容决定高度，无法为子元素提供有效的高度参考上下文。

解决方案：使用Flexbox布局改造父容器 #

通过将父容器设置为垂直方向的flex布局，利用flex的空间分配特性，让目标子元素自动占据剩余空间。

修改后的CSS代码

.Container
{
    background-color: #eeeeee;
    width: fit-content;
    max-height: 50px;
    /* 改为垂直flex布局 */
    display: flex;
    flex-direction: column;
}
.ActionBar
{
    background-color: #dddddd;
    text-align: center;
    /* 固定ActionBar高度，避免被挤压 */
    flex-shrink: 0;
}
.TableContainer
{
    display: flex;
    /* 占据容器剩余全部空间 */
    flex: 1;
    /* 确保子元素能正确利用空间 */
    min-height: 0;
}
.TableWrapper
{
    overflow-y: scroll;
    /* 让TableWrapper占满TableContainer的宽度 */
    flex: 1;
}
.TableMenu
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #cccccc;
    /* 固定菜单宽度，避免被挤压 */
    flex-shrink: 0;
}

对应的HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="Container">
        <div class="ActionBar">
            Action
        </div>
        <div class="TableContainer">
            <div class="TableMenu">
                Menu
            </div>
            <div class="TableWrapper">
                <table>
                    <tr>
                        <td>cell</td>
                        <td>cell</td>
                        <td>cell</td>
                    </tr>
                    <tr>
                        <td>cell</td>
                        <td>cell</td>
                        <td>cell</td>
                    </tr>
                    <tr>
                        <td>cell</td>
                        <td>cell</td>
                        <td>cell</td>
                    </tr>
                    <tr>
                        <td>cell</td>
                        <td>cell</td>
                        <td>cell</td>
                    </tr>
                    <tr>
                        <td>cell</td>
                        <td>cell</td>
                        <td>cell</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

关键说明 #

1. .Container设置display:flex+flex-direction:column：将容器改为垂直方向的flex布局，让内部子元素按垂直方向排列。
2. .ActionBar设置flex-shrink:0：防止ActionBar被剩余空间的子元素挤压变形，保持自身高度。
3. .TableContainer设置flex:1：告诉flex布局，这个元素要占据容器中除了其他固定高度子元素之外的全部剩余空间。
4. .TableContainer添加min-height:0：解决flex容器中子元素内容溢出时，可能无法正确收缩的问题，确保滚动生效。
5. .TableWrapper设置flex:1：让表格容器占满TableContainer的宽度，同时overflow-y:scroll在内容超出时显示滚动条。

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