Flex子项默认等高是因为align-items: stretch为容器默认值，子项未设height/min-height或align-self时自动拉伸填满交叉轴；父容器需直接包裹子项且有可靠高度来源（如min-height: 100vh），侧边栏用flex: 0 0 240px、主内容用flex: 1最稳妥。
Flex 实现等高侧边栏，只要父容器设 display: flex，子项不显式限制高度，就天然等高——不是“能实现”，而是默认行为。
为什么 flex 子项默认等高？
因为 Flex 容器的交叉轴对齐方式默认是 align-items: stretch。只要子项没写 height、min-height 或 align-self: flex-start，它们就会自动拉伸填满容器最大高度。
- 父容器必须是直接包裹侧边栏和主内容的元素，不能是嵌套过深的中间层
- 如果父容器本身有
height: 200px这类固定高度，会压制拉伸行为，导致等高失效 - 侧边栏里放长文本或未换行 URL 时，主内容区可能被撑宽甚至溢出，此时给主内容加
min-width: 0可强制截断
flex: 0 0 240px 和 width: 240px 有什么区别？
flex: 0 0 240px 是更安全的写法，它明确禁止缩放（flex-shrink: 0）和增长（flex-grow: 0），避免内容挤压变形；而 width: 240px 在某些 Flex 场景下仍可能被压缩（比如父容器空间不足且没关 shrink）。
- 侧边栏用
flex: 0 0 240px，主内容用flex: 1，这是最稳组合 - 别用
flex: 1 1 auto给主内容——auto 值会让它在内容变多时主动收缩，破坏等高 - 如果某栏确实不想等高（比如只按内容高度显示的工具栏），单独加
align-self: flex-start
移动端收起侧边栏后，等高还成立吗？
收起后若用 display: none，该栏从渲染树移除，剩余两栏仍等高；但若只用 visibility: hidden 或 opacity: 0，它还在布局中，依然参与等高计算，视觉上“消失”但逻辑上没退出。
立即学习“前端免费学习笔记（深入）”；
- 推荐收起方案：
.sidebar.collapsed { width: 0; overflow: hidden; }+ 对应的main的margin-left: 0 - 动画要用
transition: width 0.3s ease，别只过渡 opacity，否则点击区域还在 - 用
order控制视觉顺序（如把收起后的侧边栏顶到顶部），不影响 DOM 结构和可访问性
最容易被忽略的是：等高依赖于父容器的“高度来源”。如果父容器高度来自内容（height: auto），而内容又很短，整个侧边栏看起来就不够高——这不是 flex 失效，而是你没给父容器一个可靠的参照高度，比如 min-height: 100vh。
