绝对定位元素设置height为0时，如何让其内部子元素同步隐藏？

问题根因 #

绝对定位的.box元素同时设置top:0、bottom:0和height:0时，CSS规则会优先采用明确设置的height属性，父元素最终渲染高度为0；但元素默认的overflow属性为visible，溢出父元素边界的内容会直接对外显示，所以内部的子元素不会随着父元素高度归0而隐藏。

解决方法 #

给.box添加overflow: hidden属性即可，该属性会自动隐藏所有超出父元素边界的内容，父元素高度为0时子元素就会同步隐藏，修改后的CSS代码如下：

.box {
  background: black;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 0;
  /* 新增溢出隐藏规则 */
  overflow: hidden;
}
.box .box-inside {
  padding: 2em;
  background: #f4f4;
}

拓展说明 #

如果需要实现高度收缩的过渡动画，可以搭配transition属性同时控制height、padding、opacity等属性，实现更自然的显示/隐藏效果。

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