Flex父容器中输入框挤压固定宽度按钮问题求助

问题出在<input>元素的默认样式上——浏览器给表单元素设置了min-width: auto，这会让输入框无法缩小到自身内容宽度以下，哪怕你设置了flex:1，它还是会占用足够容纳自身内容的宽度，最终把按钮挤出容器。

解决方法很简单，给输入框加上min-width: 0，允许它被压缩到更小的宽度：

修改后的CSS代码：

.container {
  margin: auto;
  padding: 1rem;
  width: 30%;
  box-sizing: border-box;
}

.row {
  width: 100%;
  display: flex;
  align-items: center;
}

.row input {
  flex: 1;
  min-width: 0; /* 关键：解除输入框的最小宽度限制 */
  box-sizing: border-box; /* 可选但推荐：确保padding/border不额外占宽 */
}

.row button {
  width: 40px;
  height: 40px;
  margin-left: 8px; /* 可选：添加间距提升美观度 */
}

原理说明 #

• flex:1 等同于 flex-grow:1; flex-shrink:1; flex-basis:0%，它告诉输入框可以占据容器的剩余空间，同时允许它在空间不足时缩小。
• 但默认的min-width:auto会阻止输入框缩小到内容宽度以下，导致按钮被挤出。添加min-width:0后，输入框就能正常响应flex布局的空间分配规则，和按钮一起适应容器宽度。

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