为何overflow:auto未按预期生效？实现.modal-message子容器单独滚动

要实现仅让.modal-message滚动且不超出父容器.modal-container，可以利用Flex布局来分配容器内的空间，具体修改如下：

修改后的CSS代码 #

.content {
    width: 600px;
    margin: 0 auto;
    background: #ddd;
}

.wrapper {
    padding: 1rem;
    position: relative;
}

.modal {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
}

.modal-container {
    max-width: 80%;
    max-height: 80%;
    display: flex; /* 启用Flex布局 */
    flex-direction: column; /* 子元素垂直排列 */
}

.modal-header {
    padding: .1rem 1rem;
    background: #ccc;
}

.modal-message {
    flex: 1; /* 占据容器剩余的所有垂直空间 */
    padding: 1rem;
    background: #f1f1f1;
    overflow: auto; /* 内容超出时显示滚动条 */
}

原理说明 #

• 将.modal-container设置为Flex容器并指定垂直排列后，它会严格遵循max-height: 80%的限制，不会被内部内容撑开。
• .modal-header保持自身内容的高度，.modal-message通过flex:1获取容器内剩余的所有垂直空间。
• 当.modal-message内的内容超过分配的空间时，overflow:auto会触发滚动条，父容器.modal-container不会出现滚动或溢出。

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