CSS Grid窄屏失去响应，表单输入无法自适应问题排查

问题根源 #

你使用flex-flow: column wrap实现垂直表单时，flex列的宽度默认由内容撑开，在768px以下的窄屏环境中，外层容器宽度被压缩后，flex列的宽度没有得到合理约束，导致input { width: 100%; }无法基于你期望的300-400px宽度生效。

解决方案（推荐CSS Grid替代方案） #

相比flex column wrap，CSS Grid对多列自适应的控制更直观，能完美实现你要的固定列宽+自动换行效果，具体修改如下：

核心代码调整

/* 桌面/平板端原有布局保留 */
.form {
  display: flex;
  flex-flow: column wrap;
  height: 800px;
  gap: 1rem;
}

/* 768px以下窄屏适配 */
@media (max-width: 767px) {
  .form {
    /* 替换为Grid布局，自动适配列数 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    height: auto; /* 取消固定高度，让内容自然撑开 */
    gap: 1rem;
  }

  /* 确保输入框完全占满列宽 */
  .form input {
    width: 100%;
    box-sizing: border-box; /* 关键：避免padding/border撑宽输入框 */
  }
}

关键细节说明

• box-sizing: border-box：必须给input添加该属性，否则width: 100%会额外叠加padding和border的宽度，导致输入框超出容器范围。
• Grid的auto-fit + minmax：自动根据屏幕宽度调整列数，每列最小保持300px，最大占满可用空间，既满足你要的固定宽度需求，又能自适应不同窄屏设备。
• 取消固定高度：窄屏环境下改用Grid自然流布局，更贴合移动端垂直阅读的交互体验。

兼容flex布局的备选方案（不推荐） #

如果坚持使用flex column wrap，可通过给表单容器添加宽度约束+横向滚动实现：

@media (max-width: 767px) {
  /* 表单的父容器 */
  .form-wrapper {
    overflow-x: auto;
  }
  .form {
    width: fit-content;
    min-width: 300px;
  }
}

内容的提问来源于stack exchange，提问作者Cypher or KJ