Chrome中flex容器内Input不遵循宽度，需加min-width:0才正常，IE无此问题求解析？

这其实是现代浏览器和IE在flexbox规范实现上的差异导致的，具体来说：

• 现代浏览器（Chrome等）遵循标准flexbox规则：
  在标准的flex布局中，flex item的min-width默认值是auto。这个值的作用是让元素不会收缩到小于它的固有内容宽度。而input元素本身有一个浏览器预设的固有宽度，所以当flex容器变窄时，input会坚守这个最小宽度，不会跟着容器收缩。只有手动设置min-width: 0，才能打破这个默认限制，让input完全遵循flex容器的宽度约束。

• IE的flex实现基于旧版草案：
  IE的flexbox（尤其是旧版的-ms-flexbox）并没有严格遵循最终的标准规范，它的flex item默认不会保留固有内容的最小宽度，而是会尽可能地收缩以适应容器。所以在IE里，input不需要额外设置min-width: 0就能正常适配flex容器的宽度。

简单总结就是：现代浏览器严格执行了flex item的最小尺寸保护规则，而IE的旧版flex实现跳过了这个规则，才导致了这种显示差异。如果要做跨浏览器兼容，给flex容器里的input加上min-width: 0是稳妥的做法。

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