如何限制HTML input输入框宽度不超出外层包裹容器的边框范围

问题根源 #

input属于替换元素，默认自带内置最小宽度，不受父容器宽度约束；同时你没有统一配置盒模型，元素的边框、内边距会额外增加总宽度，最终导致输入框溢出父容器边框。

修复方案 #

修改后的CSS代码如下：

/* 先加全局盒模型重置，避免所有元素宽度计算异常 */
* {
  box-sizing: border-box;
}

section, h1 {
    padding: 0 1em;
}

.grid {
    display: grid;
    /* 替换固定列宽为响应式配置，窗口缩放到小尺寸会自动减少列数 */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* 行高适配内容高度，避免内容过多溢出 */
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 50px 30px;
    max-width: 600px;
}

.grid-item {
    border: thin #566d7e solid;
    padding: 10px;
    /* 内部元素垂直排列，统一控制间距 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.grid-item > label {
    text-align: center;
}

.grid-item > input {
    margin: 2px;
    /* 宽度适配父容器可用空间 */
    width: calc(100% - 4px);
    /* 重置input默认最小宽度，彻底解决溢出问题 */
    min-width: 0;
    text-align: center;
}

额外说明 #

你这个功能是DND（龙与地下城）的角色属性录入卡，六个属性分别对应力量、敏捷、体质、智力、感知、魅力，输入属性值后会自动计算对应的属性调整值。

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