CSS Flex布局问题：输入框固定宽度且自适应换行填充剩余空间

要实现输入框默认固定325px宽度，左侧字段文本过长换行时输入框自动填充容器剩余宽度的效果，只需调整以下两处样式：

• 给输入框设置 flex: 1 0 325px：

  • flex-grow: 1 让输入框在换行后自动占满容器宽度
  • flex-shrink: 0 确保空间充足时输入框不会被压缩，维持325px基准宽度
  • flex-basis: 325px 定义输入框的初始固定宽度

• 给左侧字段容器设置 flex-shrink: 0：

  • 避免字段文本被挤压变窄，保证过长时自动换行

修改后的完整代码如下：

.container {
  width: 450px;
}

.wrapper {
  display: flex;
  gap: 5px 10px;
  flex-wrap: wrap;
  align-items: center;
}

.field {
  font-size: 1rem;
  flex-shrink: 0;
}

input {
  flex: 1 0 325px;
}

<div class="container">
  <div class="wrapper">
    <div class="field">Short field</div>
    <input class="input"/>
  </div>
  
  <br/>

  <div class="wrapper">
    <div class="field">This is a very very very very very long field</div>
    <input class="input"/>
  </div>
</div>

效果说明 #

1. 字段文本较短时：字段宽度 + 输入框325px ≤ 容器宽度，输入框保持325px固定宽度，不会被压缩。
2. 字段文本过长时：字段因flex-shrink:0不会被挤压，文本自动换行；输入框随flex-wrap:wrap换行到下一行，再通过flex-grow:1填充容器全部宽度。

内容的提问来源于stack exchange，提问作者L To The J