How to make the block appear smoothly, and the content offset below, without setting a fixed height?

Question

css

Good afternoon!

In css, for transition, there is this trick:

.nav {
    height: 0;
    opacity: 0;
    transition: height .4s, opacity .3s;
  }

  .nav.active {
    height: 500px;
    opacity: 1;
  }

When an event occurs, the block moves out smoothly, and everything below also slides down smoothly.

Cool, cool, but I don't want to limit the height of the container, especially the menu.
How can I achieve the same effect without limiting the height of the container?

Answer 1

Ideally, you should calculate the height of the block with a javascript and set it.
There is also a pure css solution, but it is not ideal. Here, instead of height, max-height is used with a deliberately large value, but not too much higher than the expected height.