CSS使用height:0做显隐动画时为何必须设置overflow:hidden？

为什么设置height: 0实现隐藏时必须添加overflow: hidden #

CSS中所有元素的overflow属性默认值为visible，该属性的规则是：即使元素内容超出了自身设定的宽高范围，超出部分也不会被裁剪，会完全显示在元素边界外。
你觉得没有内容溢出属于视觉错觉：当你仅给.nav-links设置height: 0时，父容器本身的高度确实为0，但容器内的子链接元素仍然会正常渲染，超出父容器边界显示，同时还会在文档流中占据对应空间，根本达不到隐藏效果。
除此之外，它也是你实现显隐过渡动画的必要前提：如果没有overflow: hidden，在高度从0到312px的过渡过程中，所有子元素全程都是完整显示的，不会跟随父容器高度变化逐步出现/消失，完全无法实现预期的展开/收起动画效果。如果子元素带有垂直方向的margin、padding，这些边距也会在父容器高度为0时溢出，overflow: hidden同样可以裁剪这部分溢出内容，避免出现多余的空白间隙。

你参考的实现代码逻辑是正确的：

.nav-links {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  transition: var(--transition);
}

.show-links {
  height: 312px;
}

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