Chrome与Safari中flex-grow及height表现不一致问题咨询

嘿，我来帮你拆解这两个问题：

一、为什么#view的height:100%在Safari中不生效？ #

CSS的百分比高度规则是：子元素的百分比高度必须依赖父元素的明确高度值，而且这条规则要贯穿整个父元素链（从html到目标元素的每一层）。Safari在处理这种嵌套的百分比高度时，比Chrome更严格——哪怕中间某一层没有明确设置高度，它就不会计算子元素的百分比高度。

看你的代码结构：

html, body { height: 100vh; }
#work-interface { height: 100%; }
#main { } /* 这里没有设置高度 */
#view { height: 100%; /* 你添加的样式 */ display: flex; ... }

#view的父元素是#main，而#main没有设置height: 100%，所以Safari无法确定#view的100%高度参照值，自然不会生效。

修复方案（推荐用Flex布局替代百分比高度，更稳定） #

既然你已经在#view里用了flex，不如把整个父链改成flex布局，彻底避免百分比高度的兼容性问题：

html, body { 
  height: 100vh; 
  margin: 0; /* 去掉默认边距，避免滚动条 */
  display: flex;
  flex-direction: column;
}
#work-interface { 
  flex: 1; /* 占满body剩余空间 */
  display: flex;
  flex-direction: column;
}
#main { 
  flex: 1; /* 占满#work-interface剩余空间 */
}
#view { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid black;
  flex: 1; /* 直接占满#main的空间，不需要height:100% */
}

这种方式在Chrome和Safari中都能稳定生效，而且不需要依赖百分比高度的计算规则。

如果一定要用百分比高度，那必须给每一层父元素都加上height: 100%：

html, body { height: 100vh; }
#work-interface { height: 100%; }
#main { height: 100%; } /* 新增这一行 */
#view { height: 100%; display: flex; ... }

二、为什么未设置样式的#main高度是100%？ #

大概率是因为#main的父元素（#work-interface）是Flex容器——哪怕你没在#work-interface的CSS里写display:flex，也可能是你给它加的container类（比如Bootstrap的.container）自带了flex属性，或者其他全局样式影响了它。

当父元素是Flex容器时，默认的align-items: stretch会让所有子元素自动拉伸高度，填满父元素的可用空间。所以#main作为唯一子元素，哪怕没有设置height，也会被拉伸到和#work-interface一样的高度，看起来就像设置了height:100%。

你可以检查一下#work-interface的实际计算样式（浏览器开发者工具的Elements面板），看看它的display属性是不是flex，就能验证这个猜想啦。

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