如何使用flex实现超长注册表单超出屏幕高度时自动拆分为两列

这个需求完全可以通过Flex布局实现，你现有的HTML结构已经把表单项提前拆分为了两个分组，刚好适配两列布局的要求，只需要修改少量CSS代码即可达到预期效果。

具体修改步骤 #

1. 调整容器基础样式 #

给表单容器添加最大高度限制，避免表单超出视口范围，同时放宽最大宽度限制适配两列布局：

.container {
  /* 保留原有样式基础上修改以下属性 */
  max-width: 90%; 
  max-height: 90vh; /* 限制表单最大高度为视口高度的90% */
  height: fit-content;
}

2. 添加自适应布局规则 #

通过媒体查询判断视口高度，当高度不足以容纳单列表单时自动切换为两列布局：

/* 保留原有.flex-parent样式基础上添加以下代码 */
@media (max-height: 650px) {
  /* 该阈值可根据你表单单列的实际总高度自行调整 */
  .container {
    width: fit-content;
    min-width: 600px; /* 保证两列布局有足够的宽度容纳输入框 */
  }
  .flex-parent {
    flex-direction: row;
    gap: 2em; /* 控制两列之间的间距 */
  }
  .flex-item {
    flex: 1; /* 两个列平分宽度 */
  }
  /* 两列布局下统一输入框宽度，避免样式错乱 */
  .flex-item input {
    width: 90% !important;
  }
}

参数调整说明 #

代码中的650px是触发布局切换的高度阈值，你可以实际测量单列表单的总高度（包含标题、链接、输入框、提交按钮所有元素的高度加间距总和），将阈值设置为略大于该数值即可，调整浏览器窗口高度即可测试切换效果。

如果需要更精准的容器高度触发逻辑（不依赖视口高度），可以给.container添加container-type: size;属性，改用CSS容器查询实现，兼容性覆盖当前所有主流浏览器新版本。

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