为什么在CSS中使用height:0隐藏组件时需要overflow: hidden ?

Question

我不能使用display:none或visibility:none，因为它们需要动画。

为什么溢出:隐藏是必要的，当我没有看到或认为它是溢出?

https://www.youtube.com/watch?v=-8LTPIJBGwQ(大约24分钟，我有问题的部分是)

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

Answer 1

CSS的overflow属性定义了当容器的内容大于容器本身时如何处理。自内容总是会大于容器时,容器是单维(即它的一个维度设置为0)溢出属性将被用来定义web页面如何处理内容。默认情况下，溢出设置为"可见"，因此，内容将显示在原始容器的外部。如果你想要的内容不可见,你必须设置溢出隐藏,这将导致任何溢出内容(内容不能容纳在容器)被隐藏。

由于没有内容可以插入到高度为0px的容器中，因此容器的所有内容都将被视为溢出，并且由于您想要隐藏内容，因此需要隐藏溢出—这就是将overflow设置为hidden所做的。https://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

如果你不确定overflow: hidden;是否会溢出，那么它总是好的。即使您使用height: 0;。

这只是一个额外的检查，这样你就可以确保它不会溢出。