flex: 1只在display: flex父容器中生效，否则无效；父容器须有明确宽度且子项设min-width: 0、box-sizing: border-box才能正常分配剩余空间。
父容器没设 display: flex，flex: 1 就是摆设
很多情况右侧窄得可怜，甚至和左侧一样宽，根本原因是 Flex 属性只在 Flex 容器内生效。光给子元素写 flex: 1 没用，必须显式声明父容器为 Flex 上下文。
-
.container必须加display: flex，推荐同时写flex-direction: row（虽是默认值，但某些旧 WebView 会忽略隐式声明） - 常见破坏 Flex 上下文的操作：
float、position: absolute、display: inline-block - 父容器还得有明确宽度来源，比如
width: 100%、width: 100vw或max-width: 1200px；否则 Flex 引擎算不出“剩余空间”，flex: 1就分不到任何东西
左侧只写 width: 200px，小屏下会被压缩
width: 200px 是盒模型层的初始宽度，在 Flex 容器里仍受 flex-shrink: 1（默认值）影响。内容一多或视口一窄，它就被压窄，反过来挤压右侧空间。
- 正确写法是
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px）——这是 Flex 层语义锁定 - 如果左侧含图标+文字，建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防换行错位 - 响应式收起时，改
flex-basis比改display: none更平滑，例如：@media (max-width: 768px) { .sidebar { flex: 0 0 0; } }
flex: 1 右侧还是溢出横向滚动条？缺了 min-width: 0
Flex 子项默认 min-width: auto，即最小宽度不低于其内容自身宽度。遇到长 URL、未换行文本、嵌套 Flex 容器时，它宁可横向溢出也不收缩。
- 必须加
min-width: 0才允许真正收缩到零 - 必须加
box-sizing: border-box，否则 padding/border 会被额外计入分配宽度（Safari 14–15 尤其敏感） - 内部若含长文本，补上
overflow-wrap: break-word和word-break: break-word - 漏掉
min-width: 0，哪怕其他都对，小屏下也大概率溢出——你可能花半小时排查 HTML 结构或 JS 脚本，却没意识到问题藏在这一行 CSS 里
IE11 / Safari 9 兼容性细节不能靠猜
这些浏览器对 flex: 1 解析有偏差，不是语法写错，而是引擎行为不一致。
立即学习“前端免费学习笔记（深入）”；
- IE10/11 推荐显式写
flex: 1 1 0%，别简写为flex: 1 - Safari 9 下，若右侧含
<table>或长单词，需加word-break: break-word和min-width: 0 - IE11 中，若父容器没设
width且子项含min-width，主区域可能收缩为 0；补救：父容器加width: 100%，主区写flex: 1 1 0并加min-width: 0
