子元素未遵循父级Grid的fit-content(135px)列宽限制问题求助

你的问题出在fit-content(135px)的默认行为上：fit-content()会根据子元素的内在尺寸计算列宽，当子元素包含不可换行的内容（比如长文本、无换行的inline元素、固定尺寸的图片）时，它不会主动将列宽限制在135px内，而是会跟着内容撑大。

以下是两个可行的解决思路，不需要破坏原有组件样式：

1. 修改网格列的定义 #

将第一列从fit-content(135px)改为minmax(0, fit-content(135px))。Grid列默认的最小宽度是auto，会自适应内容尺寸，用minmax(0, ...)强制将列的最小宽度设为0，这样即使子元素内容超出，列宽也不会超过135px。

修改后的Grid样式：

.grid {
    grid-template-columns: minmax(0, fit-content(135px)) 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "selector title"
        "selector ."
 }

2. 给子元素添加溢出控制 #

配合上面的列定义，给.child添加overflow属性，同时保留min-width: 0，让子元素内容在列内被截断或换行，不会撑大列宽：

.child {
    grid-area: selector;
    min-width: 0; /* 解除Grid项目默认的最小宽度限制 */
    overflow: hidden; /* 超出内容隐藏，也可以用auto显示滚动条 */
    /* 可选：如果需要单行截断显示省略号 */
    white-space: nowrap;
    text-overflow: ellipsis;
}

为什么之前的min-width: 0无效？ #

因为你只给子元素设置了min-width:0，但Grid列本身的fit-content(135px)默认最小宽度是auto，会优先适配子元素的内容尺寸，所以必须先修改列的定义为minmax(0, fit-content(135px))，再给子元素添加溢出控制，才能彻底解决列被撑大的问题。

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