flex-grow设为0和1不能直接撑满右侧，因flex-grow仅作用于剩余空间，左侧若未设flex-shrink:0或用固定宽，仍会被压缩；右侧需配合左侧不抢空间才能生效。
flex-grow 设为 0 和 1 为什么不能直接撑满右侧？
因为 flex-grow 只对剩余空间起作用，而左侧元素若没设 flex-shrink: 0 或用了固定宽（比如 width: 200px），它仍可能被压缩——尤其当容器窄、内容多时。右侧元素即使设了 flex-grow: 1，也得先确保左侧“不抢空间”。
实操建议：
- 左侧必须显式声明
flex-shrink: 0，否则默认值为 1，会参与收缩 - 右侧用
flex-grow: 1即可，无需设flex-basis（默认auto已按内容宽起步） - 整行容器要设
display: flex，且不能让子项换行（flex-wrap: nowrap是默认值，但显式写上更稳妥）
左侧用 width 还是 flex-basis？哪个更稳？
用 flex-basis 更稳。因为 width 在 Flex 容器里只是初始参考，仍受 flex-shrink/flex-grow 影响；而 flex-basis 是 Flex 布局的“基准尺寸”，配合 flex-shrink: 0 才真正锁死宽度。
常见错误现象：左侧写了 width: 240px，但在小屏下变窄甚至文字换行——其实是被压缩了。
实操建议：
- 左侧设
flex: 0 0 240px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px） - 右侧设
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 避免混用
width和flex-basis，容易触发意外计算
内容溢出或换行导致右侧宽度异常怎么办？
右侧自适应区域如果内部有长单词、URL 或未设 min-width: 0 的嵌套 Flex 容器，会撑大自身，破坏布局。Flex 默认不强制截断，也不自动缩小子项。
使用场景：右侧放搜索框、表格、富文本预览等动态内容时高频出现。
实操建议：
- 右侧容器加
min-width: 0，这是关键——它允许 Flex 子项在必要时收缩到 0 - 内部文本加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap控制溢出 - 避免右侧子项设固定
width或min-width，尤其不要写死min-width: 300px
IE11 兼容时 flex: 1 不生效怎么处理？
IE11 对 flex: 1 解析有 bug，常表现为右侧不伸展或高度塌陷。根本原因是它把 flex: 1 错解为 flex: 1 1 0%，而 0% 在某些上下文中无效。
性能影响：补丁本身无开销，但多一层 CSS 规则需注意 specificity 冲突。
实操建议：
- 右侧改用完整写法：
flex-grow: 1; flex-shrink: 1; flex-basis: 0px（注意是0px，不是0%） - 左侧保持
flex: 0 0 240px，IE11 对这个写法兼容良好 - 如用 Autoprefixer，确认已开启
ie: 11支持，它会自动补-ms-flex前缀
min-width: 0 和 flex-shrink: 0 这两个点，其他都好调——但少一个，整个布局就可能在某个分辨率或内容长度下突然错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
