Why does transition only work in one direction?

Question

css

When scrolling down, the transition does not work, but when scrolling to the top it works. Where is the mistake?

Answer 1

Well, apparently it doesn't animate from height: 100% to height: auto;
But if you change auto to 0%, then more or less, but I'm not sure that this will work

#main.active {
  min-height: auto;
  height: 0%;
}

Answer 2

Maybe a ready-made script will suit you?
https://youtu.be/RX5kFtUI7q0

Answer 3

You write a small js to get the height of your page (well, or the element on which the effect should appear) after loading, add the initialization of the same code to resize (you never know how the content behaves), use this value for animation.
If the height is not known, no transitions and animations will work correctly. Any accordions, scrolls, etc. require a known height to work correctly. Her browser, unfortunately, "on the machine" does not slip.
I do not give a solution, you can find it on the Internet. But he described the general meaning of the actions.