本文解决 Flexbox 布局中子元素内容溢出但页面整体无法滚动的问题，核心是避免 overflow-y: hidden（或隐式截断）干扰文档流，通过合理设置 flex-direction、align-items 和 gap，确保 Flex 容器内元素垂直堆叠并自然触发全局页面滚动。

本文解决 flexbox 布局中子元素内容溢出但页面整体无法滚动的问题，核心是避免 `overflow-y: hidden`（或隐式截断）干扰文档流，通过合理设置 `flex-direction`、`align-items` 和 `gap`，确保 flex 容器内元素垂直堆叠并自然触发全局页面滚动。

在移动端 Web 开发中，一个常见误区是：为 Flex 容器错误地添加 overflow-y: visible（该声明实际无效）或未意识到 Flex 默认 flex-direction: row 会将子项水平排列，导致高度不足、内容被“挤出视口下方”却无法滚动——尤其当容器父级存在 min-height: 100vh 或 height: 100% 等限制时，浏览器无法识别内容真实高度，从而禁用全局滚动。

正确做法是让 Flex 容器自身成为文档流中可伸展的垂直布局单元，而非试图在内部启用局部滚动。以下是关键修复策略：

✅ 将 flex-direction 改为 column
使子元素（如 .email-shapeselect）垂直堆叠，自然撑高容器高度，触发父级 的默认滚动行为。

✅ 移除所有 overflow-y 相关声明
overflow-y: visible 在 Flex 容器上无实际效果；而 overflow-y: auto/scroll 会创建局部滚动区域，违背“全页滚动”需求。保持 overflow: visible（默认值）即可。

✅ 使用 gap 替代 margin 控制间距
gap 是 Flexbox 原生属性，不会引发外边距折叠或意外高度塌陷，比手动设置 margin-bottom 更可靠。

✅ 确保图片和文本具备明确尺寸与盒模型行为
例如为 .emailshape 设置固定宽高，并统一 background 占位（防止加载空白时布局抖动），同时重置段落 margin-top: 0 避免顶部空白干扰对齐。

以下是优化后的核心 CSS 示例：

#shapes {
  width: 100vw;
  display: flex;
  flex-direction: column;   /* 关键：垂直排列，撑高容器 */
  justify-content: center;
  align-items: center;      /* 水平居中所有子项 */
  gap: 10px;                /* 安全、语义化的间距控制 */
  /* 移除 overflow-y: visible —— 无需且无效 */
}

.emailshape {
  width: 40px;
  height: 40px;
  background: #000;
  object-fit: contain;
}

.pk-nm-tb {
  margin: 4px 0 0;
  font-size: 16px;
  text-align: center;
}

/* 响应式增强（推荐） */
@media (max-width: 480px) {
  .emailshape { width: 32px; height: 32px; }
  .pk-nm-tb { font-size: 14px; }
}

⚠️ 注意事项：

• 检查父级元素（如 #noPw-email）是否设置了 height: 100vh 或 min-height: 100vh —— 若内容高度超过视口，需改为 min-height: 100vh 并确保其不设 overflow: hidden；
• 避免在 Flex 容器或其任意祖先上使用 position: absolute/fixed，否则可能脱离文档流，导致滚动失效；
• 所有图片建议添加 loading="lazy" 和 alt 属性，提升可访问性与加载稳定性。

通过以上调整，#shapes 内的三个形状选择块将在移动端垂直排列、自适应间距，并随内容增长自然拉伸页面高度，最终由浏览器原生支持全页纵向滚动——无需 JavaScript，不破坏语义结构，完全符合现代 CSS 布局最佳实践。