Flex搜索框优化：实现按钮向左扩展且不增大容器宽度

要实现按钮变宽时仅向容器内部扩展、不增大容器宽度的效果，只需调整Flex布局属性并固定容器宽度，具体修改如下：

1. 固定搜索容器宽度 #

将.searchContainer的flex属性改为0 0 300px，让容器固定为300px宽度，不会因内部元素宽度变化而拉伸：

.searchContainer {
  display: inline-flex;
  flex: 0 0 300px; /* 固定宽度为300px，不伸缩 */
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

如果需要容器在空间不足时可缩小（但按钮变宽时仍不增大），也可改用max-width: 300px配合flex: 1 1 300px，但固定宽度方案更贴合需求。

2. 让输入框自适应剩余空间 #

给.searchBox添加box-sizing: border-box，避免padding导致元素超出容器，同时保留flex: 1让它占据按钮之外的所有剩余空间：

.searchBox {
  border: 0;
  padding: 0.5rem; /* 调整左右padding，优化输入内容排版 */
  flex: 1;
  box-sizing: border-box; /* 确保padding不影响元素宽度计算 */
}

3. 优化按钮文本显示（可选） #

给按钮添加white-space: nowrap，防止文本换行，确保按钮宽度随文本长度自然扩展：

.searchButton {
  background: #538AC5;
  border: 0;
  color: white;
  padding: 0.5rem;
  border-radius: 0;
  white-space: nowrap; /* 禁止文本换行 */
}

完整修改后的代码 #

.searchContainer {
  display: inline-flex;
  flex: 0 0 300px;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.searchBox {
  border: 0;
  padding: 0.5rem;
  flex: 1;
  box-sizing: border-box;
}

.searchButton {
  background: #538AC5;
  border: 0;
  color: white;
  padding: 0.5rem;
  border-radius: 0;
  white-space: nowrap;
}

修改后，当按钮文本增多变宽时，会向左挤压输入框的空间，而整个搜索容器的宽度始终保持300px，不会被撑大。

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