如何让固定宽度按钮与自适应输入框填满flex布局的父级div？

嘿，我帮你搞定这个flex布局的小问题！你之前遇到的input超出容器、按钮固定宽度失效的问题，核心是没利用好flex布局的原生属性，咱们直接调整CSS就能完美解决，不用依赖overflow:hidden来“遮丑”。

具体修改方案 #

直接替换你的CSS代码，重点调整flex相关属性：

.container { width:205px; }
.bar { 
  border-radius: 25px; 
  box-sizing: border-box; 
  display: flex; 
  width: 100%; /* 确保容器自身不超出父级 */
}
.bar_input { 
  font-size: 15px; 
  height: 35px; /* 和按钮高度统一，避免错位 */
  box-sizing: border-box; 
  flex: 1; /* 关键：让输入框占据所有剩余空间 */
  border: none; /* 可选：去掉默认边框，让样式更和谐 */
  padding: 0 10px; /* 可选：加内边距提升输入体验 */
}
.bar_button { 
  padding: 8px 8px 14px 1px; 
  width: 37px; 
  height: 35px; 
  flex-shrink: 0; /* 固定按钮宽度，防止被压缩 */
  border: none; /* 可选：去掉默认边框 */
  background-color: black;
}

你的HTML结构完全不需要改动，保持原样就好。

为什么这样改？ #

• flex:1给输入框：这个属性是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，简单说就是告诉输入框：“容器里除了按钮占的地方，剩下的空间全归你”，自动适配父容器宽度，绝不会超出。
• flex-shrink:0给按钮：强制按钮保持你设置的37px宽度，哪怕容器空间紧张，也不会被压缩变形。
• 统一高度：把输入框高度改成和按钮一样的35px，避免两个元素高低不齐，视觉上更规整。
• 去掉width:100%：原来的width:100%会让输入框优先按自身宽度计算，忽略flex的空间分配规则，删掉它才能让flex属性发挥作用。

效果验证 #

修改后按钮会稳稳保持37px宽度，输入框自动填满剩余的父容器空间，两者加起来刚好等于.container的205px宽度，完全不会超出，完美符合你的需求～

内容的提问来源于stack exchange，提问作者T.Poe