如何避免input元素溢出grid布局的父容器？

出现这个问题的核心原因是：input元素有默认的最小宽度限制（浏览器默认样式中，input的min-width为auto，会基于其固有内容尺寸计算），而Grid布局的fr单位在分配空间时，会优先考虑子元素的最小尺寸，导致单元格被撑开超出父容器宽度。

以下是几种可行的解决方式：

方法1：让Input占满网格单元格宽度 #

给input设置width: 100%，同时加上box-sizing: border-box确保内边距和边框不会额外占用空间：

#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 275px;
  border: 2px solid green;
  padding: 10px;
}
input {
  background-color: hotpink;
  width: 100%;
  box-sizing: border-box; /* 可选但推荐，避免边框/内边距撑开宽度 */
}

方法2：修改Grid列的尺寸规则 #

使用minmax(0, 1fr)替代单纯的1fr，强制网格列的最小宽度为0，忽略子元素的固有最小尺寸：

#parent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 修改此处 */
  grid-template-rows: repeat(2, 1fr);
  width: 275px;
  border: 2px solid green;
  padding: 10px;
}
input {
  background-color: hotpink;
}

方法3：打破Input的最小宽度限制 #

直接给input设置min-width: 0，允许它收缩到网格分配的空间内：

#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 275px;
  border: 2px solid green;
  padding: 10px;
}
input {
  background-color: hotpink;
  min-width: 0; /* 添加这一行 */
}

以上三种方法都能让input元素正常适配2x2的Grid布局，不会溢出父容器。

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