Safari Flexbox问题：按钮内的子div无法正确填充高度

这个问题我之前也碰到过，Safari 12.x版本在处理flex布局和表单元素（比如<button>）的嵌套时确实存在兼容性bug——它没有正确识别<button>作为内部子元素的高度参考容器，反而错误地把外层的.parent当作了高度计算的基准，导致.grandchild2的高度超出按钮范围。

核心原因 #

Safari老版本对<button>元素作为flex容器的支持不完善，当父级.child2设置了height:100%并启用flex布局后，内部的<button>虽然也设置了height:100%，但Safari没有建立正确的父子高度上下文，使得.grandchild2的height:100%错误地参考了更远层的.parent高度。

可靠解决方案：绝对定位填充 #

最稳妥的修复方式是用绝对定位让.grandchild2直接填满按钮，避开Safari的flex高度计算bug：

修改后的CSS代码：

.parent { 
  height: 150px; 
  display: flex; 
  flex-direction: column; 
  background: salmon; 
  border: 2px solid black; 
}
.child1 { background: red; }
.child2 { 
  background: grey; 
  height: 100%; 
  display: flex; 
}
.grandchild2 { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: pink; 
  border: 2px solid blue;
  box-sizing: border-box; /* 避免border导致的溢出 */
}
.mybutton { 
  height: 100%; 
  width: 100%; 
  background: purple; 
  position: relative; /* 为子元素的绝对定位提供参考 */
}

HTML结构不需要修改，保持原样即可。

为什么这个方案有效？ #

通过给.mybutton设置position: relative，我们明确告诉浏览器：.grandchild2的绝对定位要以这个按钮为基准。然后用top:0; left:0; right:0; bottom:0;让子元素完全覆盖按钮的内部空间，box-sizing: border-box则确保.grandchild2的border不会超出按钮范围。这个方案在Chrome、Firefox和Safari 12.1.1中都能正常工作，完全避开了Safari的flex高度计算问题。

备选方案（如果不想用绝对定位） #

如果坚持用flex布局，可以尝试给<button>显式设置display: flex，同时让.grandchild2设置flex: 1：

.mybutton { 
  height: 100%; 
  width: 100%; 
  background: purple; 
  display: flex; /* 让按钮成为flex容器 */
}
.grandchild2 { 
  flex: 1; /* 占满按钮的可用空间 */
  background: pink; 
  border: 2px solid blue;
  box-sizing: border-box;
}

不过这个方案在部分老Safari版本中可能仍然存在兼容性问题，所以优先推荐绝对定位的方案。

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