如何修复flexbox内容垂直居中时的滚动异常问题？

数据老陈

2026-9-25

问题修复方案

问题原因

你遇到的顶部内容截断、外边距失效是flex布局的默认特性：当flex容器设置align-items: center且容器尺寸小于子元素尺寸时，子元素会向上下两侧溢出，容器滚动时无法访问溢出的顶部区域，同时居中对齐逻辑会覆盖子元素的外边距计算规则。

修复步骤

移除.container的align-items: center属性
给.content添加上下自动外边距，替换原有固定上下margin
补充.container的高度属性为100%，同时重置body默认边距，让滚动规则正常生效

修复后完整CSS代码

html, body {
    height: 100%;
    margin: 0; /* 重置浏览器默认边距，避免出现多余滚动条 */
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    height: 100%; /* 新增：继承父级高度，让滚动规则生效 */
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: auto 10px; /* 修改：上下设为auto实现居中，左右保留10px边距 */
    border-radius: 10px;
}