Flex容器中数字输入框无法收缩，flex-basis不生效问题求助

回答： #

这是因为<input type="number">属于替换元素，浏览器对这类元素的flex布局计算逻辑和普通块级元素存在差异，具体原因如下：

• 替换元素的固有尺寸限制：number输入框这类表单控件是浏览器渲染的替换元素，它们自带浏览器内置的最小尺寸（比如容纳右侧加减按钮的宽度）。即便你设置了min-width: 0，当容器缩小到一定程度时，输入框会被这个固有最小尺寸限制，无法继续收缩，同时flex-basis的基准尺寸会被固有尺寸覆盖，看起来没生效。
• flex-basis与width的优先级差异：在flex容器中，针对替换元素，width属性会直接强制覆盖元素的固有尺寸，让浏览器优先遵循你设置的宽度值进行flex收缩计算；而flex-basis只是作为flex布局的基准参考，当元素的固有最小尺寸大于flex-basis时，浏览器会优先保留控件的可显示尺寸，导致收缩失效。

你可以做个验证：给numeric类加上appearance: none去掉浏览器自带的number控件样式，再使用flex-basis，此时输入框就能正常收缩了——这直接证明了是内置控件的固有尺寸在干扰flex-basis的生效逻辑。

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