如何使两个输入框平分父容器剩余宽度且不溢出？

嘿，这个问题我之前也碰到过！核心原因是input元素自带了浏览器默认的固有宽度，直接给它设flex-grow:1的话，浏览器会优先保留它的默认最小宽度，导致整体超出父容器的200px限制。咱们来调整一下代码就能解决：

关键修改点： #

• 给input设置flex: 1 1 0%，这个简写相当于flex-grow:1（平分剩余空间）、flex-shrink:1（空间不足时可缩小）、flex-basis:0%（忽略input的固有宽度，完全基于flex规则分配空间）
• 给中间的冒号容器设置flex-shrink:0，防止它被压缩变形
• 可选：给input加上box-sizing:border-box，避免padding/border额外占用宽度（虽然你现在没加边框，但养成好习惯很重要）

修改后的完整代码： #

#wrapper {
  display: flex;
  width: 200px;
  border: 1px solid red;
  box-sizing: border-box; /* 避免边框增加容器总宽度 */
}

input {
  border: none;
  flex: 1 1 0%; /* 核心：让输入框完全遵循flex分配规则 */
  box-sizing: border-box;
  padding: 0 4px; /* 可选：加一点内边距，输入体验更好 */
}

#middle {
  flex-shrink: 0; /* 确保冒号不会被压缩 */
  margin: 0 2px; /* 可选：给冒号加左右间距，视觉更舒适 */
}

<div id="wrapper">
  <input type="text" id="left">
  <div id="middle">:</div>
  <input type="text" id="right">
</div>

这样调整后，两个输入框就会自动平分父容器减去冒号宽度后的剩余空间，不管父容器怎么调整，都不会溢出啦！

备注：内容来源于stack exchange，提问作者pileup