flex: 0 0 200px比width: 200px更可靠，因其明确设flex-grow: 0、flex-shrink: 0、flex-basis: 200px，彻底禁用伸缩并锁定基准宽度，避免默认flex-shrink: 1导致的压缩。
现代项目直接用 display: flex，别碰 float —— 它不是不能跑，而是改一次就有人想重写整个布局。
为什么 flex: 0 0 200px 比 width: 200px 更可靠
只写 width: 200px 在 flex 容器里会受 flex-shrink: 1 影响，内容一多或容器一窄，左侧就被压缩，实际宽度可能变成 187px 或更小。
-
flex: 0 0 200px明确禁用伸缩、锁定基础宽度，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px - 必须配合
box-sizing: border-box，否则 padding 和 border 会额外撑宽 - 若左侧含图标+文字，建议加
min-width: 0防止内部 inline 元素强制撑宽
flex: 1 为什么有时不占满剩余空间
常见现象：右侧窄得离谱、长文本横向溢出、甚至换行错乱。根本原因不是语法错，而是没释放收缩边界或盒模型干扰。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 右侧必须加
min-width: 0，否则 URL、未换行英文、嵌套 flex 会拒绝收缩 - 父容器需有明确主轴宽度来源，比如
width: 100%或max-width: 100vw，否则“剩余空间”算不出来 - 避免给右侧再设
width: 100%或calc()，和flex: 1冲突导致错位 - Safari 14–15 和部分安卓 WebView 对
border/padding更敏感，务必用box-sizing: border-box
响应式收起左栏时别用 display: none
它会触发重排、焦点丢失、键盘导航中断，且无法做平滑过渡。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
flex-basis: 0+overflow: hidden+transform: translateX(-100%) - 这样既保持 DOM 可访问性，又支持 CSS transition 动画
- 同时给右栏加
flex: 1（别改），让它自动填满全宽 - 若需保留左栏的键盘焦点能力，记得加
tabindex="-1"并控制inert属性
真正卡住布局的，从来不是“怎么写”，而是 min-width: 0 漏了、box-sizing 没统一对齐、父容器没高度上下文——这些隐式约束不满足，flex: 1 就只是个摆设。
