设置flex-wrap: wrap后移动端Flex子项仍溢出容器的问题排查

看起来你遇到的这个移动端flex布局溢出问题，是前端响应式开发中非常典型的「视口不匹配」坑，我来帮你拆解问题并给出解决方案：

核心问题：缺少Viewport Meta标签 #

这是导致移动端浏览器出现水平滚动的最关键原因。

移动端浏览器（比如Chrome、Safari）默认会使用一个**980px的「布局视口」**来渲染页面，然后自动缩放以适应设备屏幕的物理宽度。这就意味着：

• 即使你的手机实际宽度是375px，浏览器会把页面当成980px宽来渲染
• 你的媒体查询@media (max-width: 768px)完全不会触发，因为此时布局视口是980px，远大于768px
• 桌面端的flex: 1 1 300px规则生效，当设备实际宽度小于300px + gap + 容器padding时，flex项就会溢出容器，产生水平滚动

解决方案：添加Viewport Meta标签 #

在你的HTML的<head>标签中，必须添加这个标签来让布局视口和设备的实际视口对齐：

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

这个标签的作用是告诉浏览器：

• 使用设备的实际宽度作为布局视口的宽度
• 初始缩放比例为1.0，不进行自动缩放

其他可选优化（非核心，但能让布局更健壮） #

1. 媒体查询中，将min-width: 200px改为min-width: 100%或者直接移除，确保item始终占满容器宽度，避免小屏设备上的潜在溢出
2. 给body添加margin: 0，清除浏览器默认的外边距，避免额外的页面溢出

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0; /* 清除默认外边距 */
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 100%;
      gap: 10px;
      padding: 20px;
      box-sizing: border-box;
    }
    .item {
      flex: 1 1 300px;
      min-width: 250px;
      height: 100px;
      background: #3498db;
      border-radius: 8px;
    }
    @media (max-width: 768px) {
      .item {
        flex-basis: 100%;
        min-width: 100%; /* 确保item占满容器宽度 */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

验证效果 #

添加viewport标签后：

• 移动端Chrome/Safari的布局视口会和设备实际宽度对齐，max-width:768px媒体查询会正确触发
• flex项会自动垂直堆叠，不会产生水平滚动
• 桌面端的布局保持不变，依然正常工作

内容来源于stack exchange