根本原因是table在Flex中默认min-width: auto，拒绝收缩；flex-basis: 0被忽略，必须显式设min-width: 0、width: 100%和table-layout: fixed才能生效。
flex容器里table为啥会撑破父级？
根本原因不是table本身“倔强”，而是它在Flex上下文里默认拒绝收缩——table的min-width被浏览器设为auto，强制它不能窄于内容宽度，哪怕父容器已经没空间了。flex-shrink: 1完全失效，因为连“可缩空间”都没被承认。
为什么加flex: 1也没用？
flex: 1只是flex-grow: 1; flex-shrink: 1; flex-basis: 0;的简写，但关键在flex-basis: 0是否真正生效。如果子项是<table>，它自带固有尺寸逻辑，flex-basis: 0会被忽略，实际仍按内容宽度计算初始大小。
- 必须显式加
min-width: 0（横向布局）或min-height: 0（纵向），才能解锁flex-shrink -
<table>还需额外加width: 100%和table-layout: fixed，否则列宽由内容决定，收缩无从谈起 - 若表格在外层是
el-table或iview Table这类组件，它们内部结构可能绕过Flex规则，得在外层再包一层<div>并设position: absolute; width: 100%
overflow-x: auto不生效的三个硬性条件
滚动条不出现，90%是因为容器根本没“溢出”——它被Flex撑宽了，压根没触发overflow机制。
- 父容器必须有明确宽度约束：
width: 100%、max-width: 600px等，不能依赖flex: 1间接推导 - table子项需设
flex-shrink: 0或flex: 0 0 auto（防止被压缩变形），同时配white-space: nowrap保证内容不换行 -
overflow-x: auto要加在**父容器**上，且该容器不能是直接设display: flex的那个——常需多套一层<div>来承载滚动逻辑
IE11下table在flex中拉伸失败的特殊处理
IE11对Flex交叉轴（比如align-items: stretch）极其苛刻：它要求父容器有明确的height或min-height，且子项不能带height或max-height。
立即学习“前端免费学习笔记（深入）”；
- 避免用
min-height: 100%，改用min-height: 100vh或具体像素值 -
<table>上禁用height，改用min-height+flex-shrink: 0 - 省略号方案在IE11基本不可靠，建议用外层
<div>包裹+width: 100%+overflow: hidden兜底
min-width: 0——没有它，其他所有设置都像在给一堵水泥墙贴膏药。 
