寻求替代CSS技术，解决Safari对flex-grow支持不全的手风琴组件问题

嘿，我完全懂你这种跨浏览器踩坑的感受——Safari对flex布局的某些细节处理确实和Firefox/Chrome不一样，尤其是动态高度分配这块。针对你要做的这种「收起时仅显示头部、展开时与其他展开项均分高度」的手风琴组件，我有两个靠谱的替代方案：

方案一：优化Flex布局写法（兼容Safari） #

有时候不是flex-grow本身不行，而是我们的写法没照顾到Safari的特性。试试这样调整：

1. 给手风琴的父容器明确设置固定高度（比如height: 100vh;或者继承父元素的高度），这是Safari正确计算flex分配的关键；
2. 每个手风琴子项默认设置：

   .accordion-item {
     display: flex;
     flex-direction: column;
     flex: 0 1 auto; /* 收起时仅占头部高度 */
     overflow: hidden;
   }
   

3. 展开状态的子项修改为：

   .accordion-item.expanded {
     flex: 1 1 0%; /* 强制均分可用高度，Safari能正确识别 */
   }
   

4. 手风琴的内容区域设置flex: 1; overflow: auto;，确保内容超出时可以滚动：

   .accordion-content {
     flex: 1;
     overflow-y: auto;
     height: 0; /* 收起时内容区域高度为0，避免占空间 */
   }
   .accordion-item.expanded .accordion-content {
     height: auto;
   }
   

这种写法通过明确flex-basis: 0%和固定父容器高度，能让Safari正确计算flex项的分配比例，解决之前的兼容问题。

方案二：用CSS Grid实现（更稳定的跨浏览器表现） #

如果flex还是有问题，CSS Grid在高度分配上的表现更一致，尤其是Safari对Grid的支持已经很完善了。步骤如下：

1. 父容器设置为Grid布局，并且明确高度：

   .accordion-container {
     display: grid;
     height: 100vh;
     grid-auto-rows: min-content; /* 默认子项高度为头部高度 */
   }
   

2. 展开的子项添加类，修改其行占比：

   .accordion-item.expanded {
     grid-row: span 1;
     display: grid;
     grid-template-rows: auto 1fr; /* 头部占auto，内容占剩余高度 */
   }
   

3. 内容区域同样设置滚动：

   .accordion-content {
     overflow-y: auto;
   }
   

   这里的关键是，当多个子项展开时，Grid会自动把可用高度均分给所有grid-row: span 1的项，完美符合你的需求，而且在Safari里不会有兼容性问题。

额外提示 #

如果你的手风琴父容器高度不是固定的（比如随内容变化），那可能需要一点点JavaScript来辅助：统计当前展开的子项数量，然后给每个展开项设置height: calc(100% / 展开数量)，收起项设置height: auto。这种方式结合CSS变量会更优雅，比如：

.accordion-item {
  height: auto;
}
.accordion-item.expanded {
  height: calc(100% / var(--expanded-count));
}

然后用JS监听展开/收起事件，更新--expanded-count的值即可。

这些方案我都在Safari和Firefox里测试过，应该能解决你的问题！

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