如何让父div根据子元素内容自动滚动？当前实现遇问题

问题出在.menu-box的高度设置上：

• 你给.menu-box用了min-height: 100%，加上它是position: fixed定位，当子元素内容过多时，.menu-box会被内容撑开，高度完全跟随内容变化。
• 内部的.page-links设置了height: 100%，这个100%会继承.menu-box被撑开后的高度，导致.page-links的高度和内容高度完全一致，overflow-y: auto自然不会触发滚动效果。

修复步骤 #

1. 修改.menu-box的高度设置，把min-height: 100%改成height: 100vh，让它的高度固定为当前视口的高度，不会被内容撑开：

.menu-box {
    width: 100%;
    height: 100vh; /* 替换原来的min-height:100% */
    background-color: #000;
    position: fixed;
    z-index: 10;
    transition: all 1.5s ease-in;
}

2. 移除.pl-box的overflow: hidden属性，避免它限制内容的正常显示：

.pl-box {
    position: relative;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: 120px 50px 180px 50px;
    /* 去掉overflow: hidden */
}

修改完成后，当.pl-content的内容高度超过.page-links（即视口高度减去内边距的剩余空间）时，.page-links就会自动出现垂直滚动条。

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