Flex子项min-width不生效，是因为默认min-width: auto强制保持内容固有宽度；必须先显式设min-width: 0解除锁定，再设目标值（如min-width: 240px），否则后者无效。
flex容器里子项的min-width为什么总不生效
因为flex项目默认有min-width: auto，它会强制保持内容最小宽度，哪怕你写了min-width: 240px也压不住。这不是bug，是规范行为。
必须先解除这个默认限制：
- 给子项显式写
min-width: 0（这是关键前置动作） - 再写你需要的值，比如
min-width: 240px - 完整写法示例：
.left-col { flex: 0 0 240px; min-width: 0; min-width: 240px; }
漏掉min-width: 0，后面那个240px基本等于没写。
左右两栏中哪一栏该设min-width
通常只给主内容区（右栏）设min-width，左栏用固定宽或flex: 0 0 240px更稳。
立即学习“前端免费学习笔记（深入）”；
原因很实际：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 左栏多是导航、头像、菜单，内容长度可控，固定宽不易撑开
- 右栏常含长URL、英文段落、代码片段等无空格内容，最容易在窄屏下横向溢出
- 如果右栏也用
flex: 1却不加min-width，小屏时可能缩到文字重叠、按钮不可点
典型组合：.right-col { flex: 1; min-width: 0; min-width: 320px; }
外层容器比子项更关键
直接给.left-col或.right-col设min-width，但父容器没约束，照样会被压缩变形。
真正起兜底作用的是包裹两栏的容器：
- 必须给父容器（比如
.container）设min-width - 推荐值：手机端
min-width: 320px，平板常用min-width: 480px - 同时配
overflow-x: auto，比让内容强行换行更可控
错误写法：body { min-width: 480px; }——它不阻止窗口缩小，只让body内容区变宽，滚动条照出，布局照样错乱。
双栏里表格/长文本怎么防撑开
右栏若嵌了表格或显示API地址这类长字符串，光靠min-width没用，内容会直接把整栏拉宽。
得配合内容级控制：
- 对含URL或base64的
<td>，加<code>word-break: break-word和white-space: normal - 对要单行截断的字段，必须同时设
white-space: nowrap、overflow: hidden、text-overflow: ellipsis和max-width - 千万别给整个
<table>设<code>white-space: nowrap，它会让所有列失去折行能力最易忽略的一点：这些样式必须落在具体单元格上，而不是套在表格或外层div上——否则无效。
