侧边栏不收缩是因为min-content按最长不可折行子字符串（如无空格url）计算宽度；需配合white-space:normal和overflow-wrap:break-word实现真正自适应，或改用fit-content(200px)更可控。
grid-template-columns: min-content 1fr 为什么侧边栏不收缩
因为 min-content 不是“自动缩到内容最小”，而是按网格项中**最长不可折行的子字符串**（比如一长串无空格 URL 或英文单词）来计算宽度。如果侧边栏里有 <div>https://example.com/very-long-path</div>，min-content 就会撑开整个列。
- 验证方法：给侧边栏加
background: pink，再用浏览器开发者工具检查实际渲染宽度，常会发现它远超文字本身 - 真正想实现“文字多宽就多宽”，得配合
white-space: normal+overflow-wrap: break-word，否则min-content拒绝折行，死守那串长文本 -
min-content在 Firefox 中对 flex 容器子项的处理也略有不同，建议统一用块级子元素包裹内容
侧边栏文字换行后宽度仍异常？检查 grid-column-start 和嵌套影响
常见情况是侧边栏内部用了 display: flex 或 display: inline-block 的子元素，导致 Grid 计算 min-content 时把整行内联流当做一个不可分单元——哪怕视觉上已换行，逻辑宽度仍是未折前的总和。
- 解决办法：给侧边栏直接子元素加
display: block和width: 100%，切断内联上下文干扰 - 避免在侧边栏里写
<span>标签</span><span>标签</span>这类并列内联元素；改用<div> 包裹每个项 <li>如果用了 <code>grid-column-start: 1等显式定位，要确认没意外拉伸了该区域的隐式轨道，覆盖掉min-content行为 - 安全写法是双声明：先写
grid-template-columns: min-content 1fr，再紧接一行grid-template-columns: max-content 1fr（后者兼容性更好，但略宽） - 或者用
@supports (grid-template-columns: min-content)做特性检测，只对支持的浏览器启用该布局 - 注意：PostCSS 的
autoprefixer不会为min-content加前缀，别指望它自动修复 - 写法：
grid-template-columns: fit-content(200px) 1fr - 数值 200px 可根据业务调整，比如图标菜单常用
fit-content(64px)，文字列表用fit-content(240px) - 注意不要写成
fit-content(200)（漏单位），这会导致整条声明被忽略
响应式 fallback：min-content 在 Safari 15.4 之前不支持
Safari 15.3 及更早版本会把 min-content 当作无效值，退回到 auto，结果侧边栏可能占满整行或坍缩为 0。
替代方案：用 fit-content(200px) 更可控
比起纯 min-content，fit-content(200px) 是更实用的选择：它优先用内容宽度，但上限 200px，既防爆宽又保紧凑，且现代浏览器支持度一致（Chrome 66+、Firefox 63+、Safari 14+）。
立即学习“前端免费学习笔记（深入）”；
span 悄悄锁死了换行能力。
