嵌套Flexbox在Safari浏览器中的渲染不一致问题问询

一、浏览器行为是否符合规范？ #

Chrome 116、Edge 117、Firefox 118的行为符合CSS Flexbox规范，而Safari 16.6的表现存在兼容性问题。

你的代码里，.middle既是.outer（column方向flex容器）的子元素，自身也是column方向的flex容器。当它同时设置height: 100%（继承父容器300px高度）和flex-basis: 50px时：

• 规范明确，对于column方向的flex子元素，若显式设置了非auto的height，其优先级高于flex-basis，元素应正常继承父容器高度。
• Safari错误地将flex-basis: 50px作为.middle的最终高度，忽略了height: 100%的继承规则，导致布局异常。

二、临时解决方案 #

针对该问题，可通过以下方式修复Safari布局：

• 方案1：移除flex-basis: 50px
  若无需该初始尺寸声明，直接删除即可让.middle正常继承父容器高度。
• 方案2：添加flex-grow: 1
  给.middle添加flex-grow: 1，使其在column方向flex容器中自动占满剩余空间，即使保留flex-basis: 50px，最终也会撑满父容器300px高度：

  .middle {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-basis: 50px;
    flex-grow: 1; /* 添加该行 */
    width: 400px;
    background: red;
  }
  

• 方案3：用min-height替代flex-basis
  若需求是设置.middle最小高度，改用min-height: 50px替代flex-basis: 50px，既满足尺寸要求，又不影响height: 100%生效：

  .middle {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 50px; /* 替换为该行 */
    width: 400px;
    background: red;
  }
  

三、Bug上报渠道 #

这是Safari基于WebKit引擎的兼容性bug，需上报给WebKit官方Bug跟踪系统。提交时需提供：

• 完整的HTML+CSS代码示例
• 测试的浏览器版本（Safari 16.6）
• 渲染效果对比截图
• 清晰的问题描述（flex-basis导致height:100%失效的现象）

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