Safari浏览器中flex:1仅占100vh而非完整内容高度的问题

嘿，我刚好踩过Safari这个烦人的flex布局坑，来给你捋清楚问题和解决办法：

你遇到的是Safari对带overflow: scroll的垂直flex容器的计算bug——当容器内的内容超过100vh时，设置了flex:1的子元素会错误地被限制在视口高度内，没法占满容器的实际滚动高度，而其他浏览器都能正确识别。

问题出在哪？ #

Safari在处理这类垂直flex容器时，会默认把容器的“可用高度”绑定到视口高度，哪怕容器本身已经因为内容溢出变成可滚动状态。你的page_right确实能适配完整内容高度，但它的子元素content没拿到正确的高度计算值，导致flex:1失效。

直接能用的修复代码 #

给page_right加上height: min-content（带webkit前缀兼容旧版Safari），强制浏览器按照内容实际高度来计算容器尺寸：

.page .page_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: scroll;
  /* 新增这两行修复Safari问题 */
  height: -webkit-min-content;
  height: min-content;
}

为啥这招管用？ #

min-content是CSS标准属性，它会让容器的高度由内部最长的内容块决定，而不是默认的视口高度。加上这个属性后，Safari就能正确识别page_right的实际高度，content的flex:1也就可以正常占满整个容器了。

如果还担心兼容性，min-content已经被现代浏览器广泛支持，webkit前缀只是为了覆盖老版本的Safari。另外，你也可以试试给content加min-height: 0（这是flex布局的通用修复技巧），不过在这个场景下，height: min-content对Safari的针对性更强。

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