如何用CSS实现表单输入框的自适应换行与拉伸布局？

需要实现两个输入框的响应式布局：

• 容器宽度足够时：两输入框同行，第一个随容器宽度自动拉伸，第二个保持固定宽度
• 容器宽度缩小至特定断点时：第二个输入框换行到第二行，且与第一个一样占满容器宽度

尝试Grid布局无法实现自动换行；使用Flexbox时，同行状态下第二个输入框无法维持固定宽度，相关代码如下：

.box {
  background: grey;
  padding: 20px 20px 20px 20px;
}

.wrapper {
  display: grid;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-columns: minmax(320px, 1fr) 200px;
}

.flexWrapper {
  display: flex;
  flex-wrap: wrap;
}

.flex1 {
  flex-basis: 320px;
  flex-grow: 10;
  flex-shrink: 0;
}

.flex2 {
  flex-basis: 200px;
  flex-shrink: 0;
  flex-grow: 1;
}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
</div>

<div class="flexWrapper">
  <div class="flex1 box">One</div>
  <div class="flex2 box">Two</div>
</div>

可以通过Flexbox结合媒体查询（或利用min-width自动触发换行）实现需求，以下是两种可行方案：

方案一：媒体查询控制断点 #

通过媒体查询明确指定断点，精准控制布局切换：

.box {
  background: grey;
  padding: 20px;
}

.flexWrapper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* 第一个输入框：自动填充剩余空间，最小宽度320px */
.flex1 {
  flex-grow: 1;
  min-width: 320px;
}

/* 第二个输入框：同行时固定宽度200px，禁止收缩 */
.flex2 {
  width: 200px;
  flex-shrink: 0;
}

/* 断点：容器宽度小于 320px + 200px + 6px（gap）时，切换为换行拉伸 */
@media (max-width: 526px) {
  .flex2 {
    width: 100%;
    flex-grow: 1;
  }
}

<div class="flexWrapper">
  <div class="flex1 box">One</div>
  <div class="flex2 box">Two</div>
</div>

说明 #

• flex-wrap: wrap 允许元素在容器宽度不足时换行
• .flex1 的 flex-grow: 1 让它自动填充容器剩余空间，min-width 避免元素过窄
• .flex2 同行时固定宽度并禁用收缩，媒体查询触发后改为占满容器宽度并拉伸

方案二：无媒体查询，自动触发换行 #

利用min-width让布局自动响应容器宽度，无需手动设置断点：

.box {
  background: grey;
  padding: 20px;
}

.flexWrapper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.flex1 {
  /* flex: 增长因子 收缩因子 基准宽度 */
  flex: 1 1 320px;
}

.flex2 {
  /* 同行时固定宽度200px，禁止收缩；最小宽度320px触发换行 */
  flex: 0 0 200px;
  min-width: 320px;
}

说明 #

• 当容器宽度小于 320px + 200px + 6px 时，.flex2 的 min-width 会强制它换行
• 换行后，.flex2 的 min-width: 320px 会让它占满容器可用宽度，实现拉伸效果

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