Криво работает анимация css

Есть блок, изначальная высота 0px. Необходимо чтобы анимация сработала до той высоты блока, какова высота дочерних элементов. То есть конкретной высоты блока не знаем.

#sst {
  display:flex;
  align-items: center;
  gap:10px;
  height: 0;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  transition: all 150ms ease-in-out;
}
.control_open #sst {z-index: 3000; padding-top: 9px; height: auto; opacity: 1}

Пытаюсь так сделать, анимация работает только на padding, так как указана конкретная высота.

Можно выполнить таким образом

#sst {
  display:none;
  align-items: center;
  gap:10px;
  height: 0;
  overflow: hidden;
  animation: opp_up .5s ease-in-out normal forwards;
}

.control_open #sst {animation: opp_down .5s ease-in-out normal forwards}
@keyframes opp_down {from {padding-top: 0; height: 0; opacity: 0} to {padding-top: 9px; height: unset; opacity: 1}}
@keyframes opp_up {from {padding-top: 9px; height: unset; opacity: 1} to {padding-top: 0; height: 0; opacity: 0}}

Через js, присваивать блоку display:flex либо display:none.

Вся трудность в том, что в родель добавляется и удаляется дочерний блок. Либо родителя вовсе переносим на блок выше. Анимация каждый раз срабатывает, решается путем присваивания блоку display:none.

Вроде все отлично, но блин, возможно ли выполнить это не прибегая к js?

Лучше всего работает первый вариант, не приходится затрагивать js. Но не работает анимация высоты, так как не знаем какова собственно высота блока.