Chrome中input需设max-width:100%避免超出容器边界

Chrome中未设置样式的文本输入框（<input type="text">）默认宽度约为177px，将其放入设置了max-width:100px的<div>时，输入框会超出容器边界，核心原因在于输入框属于替换元素，它的尺寸计算逻辑和普通元素存在差异：

• 替换元素（如input、img、video这类）的默认宽度由浏览器预设，并非像普通文本元素那样自适应父容器宽度。
• 父容器的max-width仅约束容器自身的宽度，不会自动传递给内部的替换元素，因此输入框会坚持使用默认宽度，无视父容器的宽度限制。

代码示例 #

<!-- 输入框会超出容器范围 -->
<div style="max-width: 100px;">
    <input name="abc" id="abc" type="text">
</div>

<!-- 给输入框添加max-width后，会被容器宽度限制 -->
<div style="max-width: 100px;">
    <input style="max-width: 100%;" name="abc" id="abc" type="text">
</div>

快速修复方案 #

给输入框添加max-width:100%样式，让它的最大宽度继承父容器的宽度约束；如果需要输入框始终占满容器，也可以直接设置width:100%。

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