Safari浏览器中Flex过渡效果失效，求CSS兼容调整方案

问题根因 #

Safari对flex复合属性的过渡存在固有兼容性缺陷，在flex-direction: column场景下对flex-basis的动态计算逻辑与Chromium、Firefox等浏览器不一致，会直接导致过渡动画丢失。

兼容方案 #

方案1：最小改动原有flex实现

仅调整CSS属性即可适配，无需修改HTML结构：

html {
  display: grid;
  /* 显式指定高度，修复Safari高度计算异常 */
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /* 显式指定高度，与html高度匹配 */
  height: 100%;
  margin: 0;
}

.content {
  background: aqua;
  flex-basis: 0;
  /* 避免Safari默认最小高度规则干扰收缩动画 */
  min-height: 0;
  overflow: hidden;
  /* 明确指定过渡属性，添加渲染优化提示 */
  transition: flex-grow 1s ease, flex-basis 1s ease;
  will-change: flex;
}

span:hover + .content {
  /* 拆分复合属性flex: 1为单独属性，规避Safari解析bug */
  flex-grow: 1;
  flex-basis: auto;
}

方案2：兼容性更强的grid实现（推荐）

该方案不依赖全局flex布局，适配所有主流浏览器，包括更早版本的Safari：
CSS代码：

.wrapper {
  display: grid;
  /* 兼容低版本Safari加-webkit前缀 */
  grid-template-rows: 0fr;
  -webkit-grid-template-rows: 0fr;
  transition: grid-template-rows 1s ease, -webkit-grid-template-rows 1s ease;
}

.content {
  background: aqua;
  overflow: hidden;
}

span:hover + .wrapper {
  grid-template-rows: 1fr;
  -webkit-grid-template-rows: 1fr;
}

对应HTML调整（仅给content套一层wrapper容器）：

<span>Hover over me!</span>
<div class="wrapper">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<p>Rest of the page content...</p>

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