右侧自适应依赖flex/grid空间分配机制而非width:100%；flex-grow:1需父容器display:flex且左侧锁死尺寸（如flex:0 0 200px）才生效，单独使用无效；推荐用flex:1（即flex:1 1 0）并配min-width:0、box-sizing:border-box。
右侧自适应不是靠“给它设 width: 100%”实现的，而是靠 Flex 或 Grid 的空间分配机制；写错一个 flex-shrink 或漏掉 min-width: 0，右侧就会撑破、换行或直接消失。
为什么 flex-grow: 1 单独写没用
因为 flex-grow 不是“让元素变宽”，而是“把主轴剩余空间按比例分给它”。如果父容器没设 display: flex，或者左侧元素没锁死尺寸（比如只写了 width: 200px 却没配 flex-shrink: 0），那根本就没有“剩余空间”可分——flex-grow: 1 直接被忽略。
- 常见错误现象：
.main { flex-grow: 1; }写了，但右侧还是窄得可怜，甚至和左侧一样宽 - 真正要检查的三件事：
.container是否有display: flex；是否显式写了flex-direction: row（默认值，但显式更稳）；左侧是否用了flex: 0 0 200px而非仅width: 200px -
flex: 0 0 200px和width: 200px差在哪？前者声明“不放大、不缩小、基准就是 200px”，后者在 Flex 容器里会被悄悄压缩
flex: 1 比 flex-grow: 1 更靠谱的原因
flex: 1 展开是 flex: 1 1 0，其中 flex-basis: 0 让它从零开始分配剩余空间，不会受内容原始宽度干扰；而单独写 flex-grow: 1 时，flex-basis 默认是 auto，若右侧内容本身很宽（比如长 URL、未设 min-width: 0 的嵌套 flex 容器），就会撑大自身，“自适应”变成“自膨胀”。
- Safari 14–15 下，右侧若有
border或padding且没设box-sizing: border-box，算出来的剩余空间会偏小，右侧可能变窄甚至消失 - 稳妥写法：
.main { flex: 1; box-sizing: border-box; min-width: 0; } - IE10–11 对
flex: 1解析有偏差，建议显式写成flex: 1 1 0
Grid 实现时最常踩的隐式轨道坑
grid-template-columns: 200px 1fr 看似干净，但一旦右侧内容超出预期（比如插入一张大图、一个未设 table-layout: fixed 的 <table>），Grid 就会触发隐式列轨道，导致右侧变窄、换行错乱，甚至整行塌陷。
<ul>
<li>必须加 <code>grid-auto-columns: 1fr，否则子项多于两列时，Grid 会按内容宽生成新列，破坏布局
<table>，默认 <code>table-layout: auto 会撑宽整列——需手动设 table-layout: fixed 并配 width: 100%
1fr 在小屏下的收缩行为更激进，可改用 minmax(0, 1fr)
width: 100%，Grid 下会被忽略，反而可能干扰对齐响应式切换时，为什么只改 flex-basis 就够了
移动端想隐藏侧边栏，不需要重写整个布局，只需在媒体查询里改左侧的 flex-basis 值。比如 @media (max-width: 768px) { .sidebar { flex: 0 0 0; } }，主内容区会自动占满——但前提是它已设 min-width: 0，否则在窄屏下拒绝收缩，横向滚动条就意外出现了。
- 此时视觉上仍占位，需配合
overflow: hidden或transform: translateX(-100%)实现平滑收起 - 不要在媒体查询里反复切换
display: flex和display: block，容易引发重排和语义错乱 - 真正麻烦的不是布局结构，而是右侧内容类型不确定：用户可输入任意长度文本、插入图片或
<iframe></iframe>，这些都得靠min-width: 0+word-break: break-word+overflow: hidden组合兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
