如何让flex容器最后一项仅在换行时填充剩余空间？

不用依赖夸张的flex-grow差值就能实现需求，试试以下CSS设置：

• 给前一个flex item（输入框）添加：

  flex: 1 1 auto;
  min-width: 0; /* 防止输入框内容过长时无法被压缩，保证换行逻辑正常触发 */
  

• 给最后一个flex item（Unknown按钮）添加：

  flex: 0 1 auto;
  margin-left: auto;
  flex-grow: 1;
  

工作原理 #

• 未换行状态：*margin-left: auto*会将按钮推至容器右侧，输入框自动填充按钮左侧的剩余空间，按钮保持自身固有宽度，不会被拉伸。
• 换行状态：按钮单独占据一行时，margin-left: auto失去作用，*flex-grow: 1*会让按钮自动填满整行的剩余空间。

这个方案完全不依赖容器的任何属性，后续通过媒体查询移除输入框的flex-grow属性时，只需调整输入框的flex值即可，不会影响按钮的表现逻辑。

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