Why overflow: hidden is necessary while using height:0 to hide a component in CSS?-CodePudding

I can't use display:none or visibility:none because it needs to be animated.

Why overflow:hidden is necessary when I don't see or think it is overflowing?

https://www.youtube.com/watch?v=-8LTPIJBGwQ (roughly around 24 mins where the part I have problem with is)

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

.show-links {
  height: 312px;
}

CodePudding user response：

The overflow property of CSS defines how to handle when the content of a container is larger than the container itself. Since the content will always be larger than the container when the container is 1-dimensional (i.e. one of its dimensions is set to 0) the overflow property will be used to define how the web page will handle the content. By default, the overflow is set to "visible", and as such, the content will display outside of the original container. If you want the content to not be visible, you have to set the overflow to hidden, which will cause any overflow content (content that can't fit inside the container) to be hidden instead.

Since no content can be inserted into a container with a height of 0px, all of the container's content will be treated as overflow, and since you want to hide the content, you need to hide the overflow - which is what setting overflow to hidden does. https://www.w3schools.com/cssref/pr_pos_overflow.asp

CodePudding user response：

It is always good to have overflow: hidden; if you are not sure if it is going to overflow. Even if you use height: 0;.

It's just an extra check so you are sure it doesn't overflow.