侧边栏固定宽度、主内容自适应：侧边栏设 display: flex + flex-shrink: 0 + flex-basis: 240px + min-width: 240px，主内容区用 flex: 1 并确保父容器有高度约束（如 height: 100vh），滚动条加在主内容区且需 overflow-y: auto。
Flex布局里侧边栏固定宽度、主内容自适应怎么写
直接给结论：用 display: flex + flex-shrink: 0 控制侧边栏不压缩，主区域用 flex: 1 占满剩余空间。别用 width 硬设主区尺寸，否则 Flex 失效。
常见错误是给主内容区加 width: calc(100% - 240px)，这和 Flex 的流式逻辑冲突，窗口缩小时侧边栏可能被压扁，或出现横向滚动条。
- 侧边栏必须设
flex-shrink: 0，否则默认值为 1，会被主内容挤压 - 主内容区推荐写
flex: 1（等价于flex: 1 1 0），不写flex-basis值更安全 - 如果侧边栏要响应式隐藏，用
display: none而非visibility: hidden，后者仍占 Flex 空间
工具栏图标垂直居中对齐总偏下？检查 align-items 和 padding
侧边栏里图标文字上下不对齐，90% 是因为父容器没设 align-items: center，或者子元素自带 vertical-align: baseline（尤其 <img> 或 <svg></svg>）。
Flex 容器默认 align-items: stretch，不会自动居中。另外，padding 不均、字体 line-height 和 font-size 混用也会干扰视觉对齐。
- 侧边栏项的容器加
display: flex和align-items: center - 图标用
<svg></svg>时，加vertical-align: middle或包裹一层<span></span>并设display: inline-flex - 避免在 Flex 子项上同时用
margin-top和align-items，行为不可预测
看板主区滚动失效？flex-direction 和 overflow 配合要点
主内容区内容超长却不出现滚动条，通常是 overflow-y: auto 加错了位置——它必须加在「有明确高度约束」的 Flex 子容器上，而不是最外层 Flex 容器。
比如整个页面是 html, body { height: 100% }，那看板容器需设 height: 100vh 或 min-height: 100vh，再让主内容区继承并设 overflow-y: auto。
- 不要给
display: flex的直接父容器设overflow，它不产生块格式化上下文 - 主内容区若用
flex: 1，必须确保其父容器有高度（如height: 100vh），否则flex: 1无参照 - Chrome 下偶尔需加
contain: layout防止滚动卡顿，但仅在复杂看板中考虑
IE11 兼容侧边栏塌陷？flex-basis 和 min-width 必须双保险
IE11 对 flex: 1 解析异常，尤其当侧边栏含文字或图片时，容易收缩到内容宽度以下。这不是 bug，是它对 flex-basis 的实现偏差。
解决办法不是放弃 Flex，而是补一层防御：给侧边栏显式设 flex-basis: 240px 和 min-width: 240px，两者缺一不可。
-
flex-basis让 IE 知道“基准尺寸”，min-width防止它无视flex-shrink继续压缩 - 别用
width: 240px替代flex-basis，IE11 下会破坏 Flex 流式行为 - 工具栏图标在 IE11 中若模糊，检查是否用了
transform: scale()，改用width/height更稳
侧边栏的宽度弹性、主区滚动边界、跨浏览器的 flex-basis 行为——这三个点任何一个没对齐，看板就会在某个环节“突然不对劲”。实际调试时，先关掉所有动画和过渡，纯看结构渲染，反而最快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
