如何为Flexbox布局内的指定区域设置独立纵向滚动条？

• Flex布局的子元素默认会优先适配内容尺寸，你给#wrapper设置的flex: 1 0 0px仅代表它在空间充足时占满剩余高度，当内部内容高度超过分配高度时，默认会被内容撑开，导致整体body高度超出视口，滚动条出现在body上。
• main作为#wrapper的flex子项没有设置溢出约束，内部div#content-wrap设置的height: 100%无法继承到明确的高度值，导致content-container的高度限制失效。

只需要修改两处CSS规则即可：

1. 给div#wrapper添加overflow: hidden，限制它的高度不会超出flex分配的视口剩余高度
2. 给main添加overflow: hidden，保证内部子元素可以继承到正确的高度

修改后的CSS代码如下：

* {padding: 0; margin: 0; }

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

header {
    flex: 0 0 50px;
    background-color: lightgray;
}

div#wrapper {
    flex: 1 0 0px;
    display: flex;
    flex-direction: row;
    overflow: hidden; /* 新增规则 */
}

aside {
    background-color: darkgray;
    flex: 0 0 50px;
}

main {
    display: block;
    flex: 1 1 0px;
    background-color: aliceblue;
    overflow: hidden; /* 新增规则 */
}

div#content {
    width: 60px;
    height: 2000px;
    margin: 10px;
    background-color: red;
}


div#content-wrap {
    width: 100%;
    height: 100%;
}

div#content-container {
    height: 100%;
    overflow-y: scroll;
}

HTML代码无需修改，修改后滚动条就会仅出现在main区域的content-container内，body不会出现滚动条。

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