如何避免flex容器拉伸超出屏幕尺寸，实现子容器内部单独滚动

你需要修改两处CSS配置即可实现要求的效果：

• 给.container添加min-height: 0属性：flex列布局下的子元素默认min-height为auto，会被内部内容撑开高度，添加该属性后允许容器收缩到父级限定的高度范围内，不会超出页面
• 修改#listItems的配置：替换原有height: 100%为flex: 1，同时添加overflow-y: auto和min-height: 0，让该容器自动占满.container里表单之外的剩余高度，内容超出时自动在容器内部生成滚动条，不会溢出边框

修改后的完整CSS代码如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.home-content {
    display: flex;
    border: 1px solid black;
    height:100vh;
    flex-flow: column;
}

.container {
    flex: 1;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 新增属性 */
}

#listItems {
    border: 1px solid green;
    flex: 1; /* 替换原height: 100% */
    min-height: 0; /* 新增属性 */
    overflow-y: auto; /* 新增属性 */
}

#listItems > ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
}

.item {
    border: 1px solid purple;
    width: 200px;
    height: 200px;
    margin-left: 4px;
}

修改后页面整体不会出现滚动条，仅绿色边框的listItems容器内部在内容超出时出现滚动条，符合你需要的图片画廊内部滚动效果。

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