minmax(auto, 300px) 中 auto 等价于 min-content 而非弹性自适应，导致侧边栏过窄；应改用 minmax(240px, 300px) 或 fit-content(300px)，并配合内容换行控制。
minmax(auto, 300px) 为什么不能直接让侧边栏“自动但不超过300px”
因为 auto 在 minmax() 的第一个参数里，不表示“内容撑开的宽度”，而是等价于 min-content——也就是按最长单词或不可断行元素算出的最小宽度。实际中常表现为窄得离谱，甚至缩成几像素。
- 想让侧边栏“尽量适应内容，但最多300px”，该用
minmax(min-content, 300px)或更稳妥的minmax(240px, 300px) -
auto只在grid-template-columns的非函数上下文中才有“弹性自适应”语义（比如auto 1fr），放进minmax()就失效 - 真要靠内容驱动宽度，得配合
fit-content(300px)，但它不是所有浏览器都支持（Safari 14.1+ 才稳定）
grid-template-columns 里怎么写才能让侧边栏动态、主内容占满剩余空间
典型写法是两列：侧边栏 + 主区。但别写成 "auto 1fr" —— 这里的 auto 会无限撑大，不受 300px 限制；也别只依赖 minmax() 单独控制一列，Grid 需要整体轨道定义。
- 推荐写法：
grid-template-columns: minmax(240px, 300px) 1fr—— 明确下限防塌缩，上限控最大宽度 - 如果希望侧边栏在内容少时更窄，可用
fit-content(300px)替代：grid-template-columns: fit-content(300px) 1fr，此时它宽度 = 内容所需 + padding，但 ≤ 300px - 避免写
minmax(auto, 300px) 1fr：Chrome 可能渲染异常，Firefox 会当minmax(min-content, 300px)处理，结果不可控
侧边栏内容溢出或换行异常时，minmax 还起作用吗
不起作用。minmax() 管的是轨道（track）尺寸，不是内部元素的布局行为。侧边栏容器宽了，但里面一个长单词或未设 overflow 的 div 仍可能撑破布局。
- 必须同步加 CSS 控制内容：给侧边栏子元素设
word-break: break-word或overflow-wrap: break-word - 图标+文字组合常见问题：用
display: flex+min-width: 0防 flex item 不收缩（尤其含img或svg时） - 如果用了
fit-content()，内容超宽时它会扩大到 300px，但不会自动换行——换行逻辑仍在子元素上，和轨道定义无关
IE 兼容或旧版 Safari 下 minmax(auto, 300px) 怎么降级
IE 完全不支持 minmax() 和 fit-content()，旧 Safari（fit-content() 支持不稳。不能只靠 Grid 新特性兜底。
- 安全降级方案：用
@supports包裹 Grid 布局，外层 fallback 用display: flex+max-width: 300px - 不要尝试用
minmax(auto, 300px)写兼容写法——它在不支持的浏览器里整条声明会被忽略，导致列数错乱 - 若必须支持 IE，侧边栏宽度建议回归固定值（如
280px）+flex布局，Grid 仅作增强
事情说清了就结束。真正卡住人的，往往不是 minmax() 语法本身，而是它和内容换行、flex 行为、浏览器兼容层叠在一起时，哪一层该负责什么尺寸控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
