Firefox与Chrome嵌套flexbox溢出表现不一致兼容问题求解

这是已知的浏览器兼容性差异：Chrome 对 table 系列元素（<tr>/<td>）的overflow: hidden支持不符合预期，即使你给<tr>设置了height: 0和overflow: hidden，Chrome 还是会将<td>内的内容撑开父元素高度，而 Firefox 遵循了溢出隐藏的规则。你之前的 flex 用法本身没有错误，是浏览器对 table 元素的样式实现差异导致的。

不需要修改<td>的 display 属性，也不用切换 display 值，仅修改两处 CSS 即可修复：

1. 给.td新增overflow: hidden属性，明确要求单元格内容溢出隐藏
2. 去掉.tr上多余的高度过渡规则，统一用.td控制高度和过渡即可（table 行的高度本身由单元格高度决定）

修改后的完整 CSS 代码如下：

table {
  width: 400px;
  border: 1px solid black;
  text-align: left;
}

th {
  border-bottom: 1px solid black;
}

.tr {
  overflow: hidden;
}

.td {
  height: 0px;
  overflow: hidden; /* 新增这一行即可解决Chrome溢出问题 */
  transition: ease height 0.3s;
  /* 注：原代码中的column-span:50px是无效CSS属性，可直接删除，HTML的colspan属性已生效 */
}

.active .td {
  height: 150px;
}

.div1 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  align-items: center;
}

.div2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

• 直接给<td>设置overflow: hidden，强制 Chrome 遵循溢出隐藏规则，收起状态下不会透出内部内容
• 保留了高度过渡属性，下拉滑入动画效果完全不受影响
• 未修改<td>的默认 display 属性，colspan跨列效果完全正常
• 修复后两个浏览器下的交互表现完全一致

内容的提问来源于stack exchange，提问作者Seth