根本原因是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>，它自带固有尺寸逻辑，<code>flex-basis: 0会被忽略，实际仍按内容宽度计算初始大小。

• 必须显式加min-width: 0（横向布局）或min-height: 0（纵向），才能解锁flex-shrink
• <table>还需额外加<code>width: 100%和table-layout: fixed，否则列宽由内容决定，收缩无从谈起
• 若表格在外层是el-table或iview Table这类组件，它们内部结构可能绕过Flex规则，得在外层再包一层<div>并设<code>position: absolute; width: 100%

  overflow-x: auto不生效的三个硬性条件

  滚动条不出现，90%是因为容器根本没“溢出”——它被Flex撑宽了，压根没触发overflow机制。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 父容器必须有明确宽度约束：width: 100%、max-width: 600px等，不能依赖flex: 1间接推导
  • table子项需设flex-shrink: 0或flex: 0 0 auto（防止被压缩变形），同时配white-space: nowrap保证内容不换行
  • overflow-x: auto要加在**父容器**上，且该容器不能是直接设display: flex的那个——常需多套一层<div>来承载滚动逻辑 <h3>IE11下table在flex中拉伸失败的特殊处理</h3> <p>IE11对Flex交叉轴（比如<code>align-items: stretch）极其苛刻：它要求父容器有明确的height或min-height，且子项不能带height或max-height。
    • 避免用min-height: 100%，改用min-height: 100vh或具体像素值
    • <table>上禁用<code>height，改用min-height + flex-shrink: 0
    • 省略号方案在IE11基本不可靠，建议用外层<div>包裹+<code>width: 100%+overflow: hidden兜底 最常漏掉的是min-width: 0——没有它，其他所有设置都像在给一堵水泥墙贴膏药。