flex实现左侧固定右侧自适应：父容器设display: flex且min-height: 100vh；左侧用flex: 0 0 240px锁定宽度；右侧用flex: 1并加min-width: 0防溢出。
用 Flex 实现左侧固定、右侧自适应，核心就三点：父容器开启 Flex 上下文、左侧锁定尺寸、右侧主动伸展填空。
父容器必须设 display: flex
这是前提，没它所有 flex 属性都无效。别只给子元素加 flex: 1 就以为完事了。
- 推荐写全：.container { display: flex; min-height: 100vh; }（加 min-height 防内容少时主区塌陷）
- 避免父容器被 float、absolute 或 inline-block 破坏上下文
- 移动端尤其注意：补上 width: 100% 或 100vw，否则剩余空间算不准
左侧用 flex: 0 0 宽度值 锁死尺寸
只写 width: 240px 不够稳——Flex 容器里它仍可能被压缩。用 flex 三元组才是真锁定。
- 正确写法：.sidebar { flex: 0 0 240px; }（不增长、不收缩、基础宽 240px）
- 若含文字图标，建议加 overflow: hidden; text-overflow: ellipsis; 防换行错位
- 小屏下要保最小宽度？可改用 flex: 0 0 minmax(200px, 240px);
右侧用 flex: 1 并防溢出
flex: 1 表示“尽可能占满”，但它默认有 min-width: auto 底线，遇到长 URL 或无空格文本会撑破布局。
- 必须加：.main { flex: 1; min-width: 0; box-sizing: border-box; }
- 内容含长英文/数字？补上 word-break: break-word; overflow-wrap: break-word;
- 别在右栏内部再写 width: 100%，容易触发双重宽度计算
高度与响应式要点
左右等高是默认行为（align-items: stretch），但要注意干扰项：
- 检查是否被重置 CSS 清除了 align-items，默认值不能被覆盖
- Safari 中 100vh 可能失效，建议 html, body { overflow-y: scroll; }
- 如需兼容 IE10+，Flex 是稳妥选择；若无需兼容旧浏览器，grid 写法更简洁：grid-template-columns: 240px 1fr;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
