flex:1未撑满右侧是因为无主轴剩余空间可分；需确保.container设display:flex、左侧用flex:0 0 200px锁死、右侧加min-width:0和box-sizing:border-box。
右侧不自适应，90% 是因为没锁死左侧、没释放右侧收缩边界，而不是 flex 写错了。
为什么 flex: 1 在右侧写了却没占满剩余空间
它不是“让元素变宽”，而是“把主轴上剩余空间按比例分出去”。没有剩余空间，flex: 1 就是摆设。
-
.container缺少display: flex—— 这是最常见的漏写 - 左侧只写了
width: 200px，没配flex-shrink: 0，小屏下被压缩，反而挤占右侧本该有的空间 - 父容器自身没明确宽度来源，比如没设
width: 100%、max-width: 100vw或inset: 0（尤其在绝对定位上下文中） - 右侧内容本身太宽（如长 URL、未设
min-width: 0的嵌套 flex 容器），触发了 flex item 默认最小宽度限制
左侧固定宽必须用 flex: 0 0 200px，不能只写 width: 200px
width: 200px 在 flex 容器里只是初始参考值，仍受 flex-shrink 影响；而 flex: 0 0 200px 显式声明“不放大、不缩小、基准就是 200px”，才真正守住“固定”二字。
- IE10–11 下，
flex: 0 0 200px比width: 200px更可靠，后者可能被错误压缩 - Safari 14–15 中，若左侧有
border或padding却没设box-sizing: border-box，计算出的“200px”会偏大，导致右侧空间被吃掉 - 如果左侧是图标或图片容器，建议额外加
min-width: 0，防止内部内容溢出撑宽父级
右侧必须加 min-width: 0 和 box-sizing: border-box
否则长文本、未换行 URL、嵌套 flex 容器会强制撑开自身，拒绝收缩——“自适应”变成“自膨胀”。
-
min-width: 0是关键开关：它覆盖 flex item 默认的min-width: auto行为 -
box-sizing: border-box确保padding和border不额外增加宽度，避免 Safari 下右侧变窄甚至消失 - 移动端小屏下更敏感，
flex: 1若缺这两项，大概率横向溢出或直接塌缩 - Firefox 对
1fr收缩更激进，但 Flex 下同理：没min-width: 0，右侧就可能卡住不收缩
响应式断点要改 flex-direction，别删 flex
移动端堆叠不是靠移除 flex，而是切换主轴方向。删掉 display: flex 会导致布局重排抖动，且语义断裂。
- 桌面端：
flex-direction: row（默认，可不写） - 移动端：
@media (max-width: 768px) { .container { flex-direction: column; } } - 左侧收起时，别用
display: none，改用flex: 0 0 0+overflow: hidden，避免重排 - 若右侧含
<table>，记得加 <code>table-layout: fixed和width: 100%，否则默认auto会撑宽整列最复杂的从来不是 flex 写法，而是内容边界——比如右侧卡片带
padding、左侧图标有border、或者嵌套了另一个 flex 容器。这些都不会被自动扣除，该减就减，该box-sizing就box-sizing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
