Как заставить складной элемент расширяться вниз при использовании Flexbox и Margin: Auto [дублировать] ⇐ CSS

[Anonymous]

У меня есть гибкая макет с некоторыми детскими элементами: < /p>

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

var coll = document.getElementsByClassName('collapsible-controller');
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function () {
this.classList.toggle('active');
var content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
}< /code>
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}< /code>


Heading 1
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Open Collapsible

Lorem ipsum...




Heading 2
Lorem ipsum dolor sit amet.

Open Collapsible

Lorem ipsum...



< /code>
< /div>
< /div>
< /p>
Все дочерние элементы используют Flex по мере того, как макет также для реализации следующего макета: < /p>
+-------------+-------------+
|  Heading 1  |  Heding 2   |
+-------------+-------------+
| Content     | Content     |
|             |             |
|             |             |
|             |             |
| Collapsible | Collapsible |
+-------------+-------------+
< /code>
Все элементы должны иметь одинаковую высоту. В то время как раздел содержимого должен иметь переменную высоту и быть расположенным прямо под заголовком, я хочу складного элемента в нижней части родительского элемента. Эта часть работает нормально, используя гибкий макет и маржинальный ряд: Auto 

на складных. Я хочу сохранить пробел между content и складным элементом при открытии complapsible : он должен соответствующим образом расширяться вниз. По какой -то причине элемент складного расширяется вверх вместо желаемого направления вниз - по крайней мере для элемента 2 в MWE, когда он является единственным расширенным складным. пробел. < /p>
Нежелательный: < /p>

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

+----------------------+--------------------+
|      Heading 1       |      Heding 2      |
+----------------------+--------------------+
| Content              | Content            |
|                      |                    |
|                      | Collapsible (Open) |
| Collapsible (Closed) | Lorem ipsum...     |
+----------------------+--------------------+
< /code>
желаемое: < /p>
+----------------------+--------------------+
|      Heading 1       |      Heding 2      |
+----------------------+--------------------+
| Content              | Content            |
|                      |                    |
|                      |                    |
| Collapsible (Closed) | Collapsible (Open) |
|                      | Lorem ipsum...     |
+----------------------+--------------------+

Код для элемента complasbible : https://www.w3schools.com/howto/howto_j ... sbible.asp

Подробнее здесь: https://stackoverflow.com/questions/797 ... and-margin