Как с помощью CSS плавно перемещать элементы под раскрывающимся элементом меню? [закрыто] ⇐ CSS

[Anonymous]

У меня есть складной пункт меню, состоящий из 4 элементов , гибкого контейнера, заголовка , , который открывается/закрывается с помощью приведенного ниже CSS, и нижнего колонтитула :

Код: Выделить всё

div.mhZero {
max-height: 0px;
}

div.mhNoMax {
max-height: 100%;
}

.menuAnimate {
transition: all 0.6s ease;
}
.flexRow {
display: flex;
flex-direction: row;
}
.ovHidden {
overflow: hidden;
}

Код: Выделить всё

Click to open

Hidden info

Footer

Меню состоит из пары этих разделов (каждый раздел представляет собой компонент React, эти компоненты отображаются в гибкий контейнер). Каждый раздел имеет нижнюю границу, разделяющую каждый элемент меню, то есть границу гибкого столбца .
Каждый раз, когда я открываю раздел, другие элементы меню и граница содержащего прыгают вниз, а затем меню открывается с переходом 0,6 секунды. И когда я закрываю меню, происходит переход на 0,6
с, а затем граница и другие элементы меню подпрыгивают.
Как сделать так, чтобы элементы меню и граница также плавно переходили при открытии/закрытии меню?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -menu-item