375px移动视图下调整ul/li边距时body溢出容器，flex布局无效如何解决？

问题根因 #

经过排查，溢出和滚动异常的核心原因有4个：

• 缺失移动端视口适配的<meta>标签，导致375px视图下页面未按照设备宽度渲染，强制放大出现溢出
• 未限制页面横向溢出，微小的内容宽度溢出会触发横向滚动条，连带干扰垂直滚动体验
• 未配置body的最小高度和居中规则，卡片无法垂直居中时会出现多余的空白滚动区域
• 列表最后一个<li>的底部外边距会无意义撑高内容区域

修复方案 #

1. 调整HTML头部

在你的HTML <head> 标签内添加视口适配规则：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 新增/修改CSS规则

/* 新增全局根元素规则 */
html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  display: grid;
  place-items: center;
}

/* 修改原有img规则，新增width属性确保图片撑满容器 */
img {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 1rem 1rem 0 0;
  object-fit: cover;
}

/* 修改原有card规则，新增移动端最大宽度限制 */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--clr-card-bg);
  border-radius: 1rem;
  max-width: 375px;
}

/* 新增列表边距优化规则，消除多余撑高 */
.stats li:last-child {
  margin-bottom: 0;
}

/* 可选：给文字区域加底部内边距，优化视觉间距 */
.text-stats {
  padding-bottom: 2rem;
}

修复完成后即可解决移动端溢出和滚动异常问题，后续做桌面端适配时，只需在媒体查询中修改.card的flex-direction为row，调整max-width数值，交换图文顺序即可。

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