css высота перехода, чтобы скрыть содержимое в контейнере

Question

У меня есть div div, расположенный в нижней части экрана. Я хочу скрыть его содержимое с анимацией (а не только с настройкой отображения ни одного), когда элемент div имеет щелчок, переводя max-height в 0.

Проблема состоит в том, что контент имеет одновременно дочерние теги, которые оставьте рост установленным, вызывая переполнение текущей высоты тела.

Какое лучшее решение для ее решения?

Я воспроизвел поведение: https://codepen.io/javheroli/pen/QWbyZEr?editors=0110

.hide-container{
  opacity: 1;
  max-height: 4em;
  transition: opacity .8s, max-height .5s;
}
.hide {
  opacity: 0;
  max-height: 0;
  transition: opacity .3s, max-height .5s;
}

Answer 1

Это можно исправить, добавив overflow: hidden; к элементу .hide-container .hide.

Answer 2

Я думаю, что самый простой способ - это перенести только свойство высоты и добавить определение overflow: hidden.

Таким образом, когда вы уменьшаете высоту, содержимое просто скрывается. Если вы также хотите анимировать контент, вы можете анимировать непрозрачность дочерних элементов. Было бы проще проверить, указали ли вы свою HTML структуру.