I have a flex layout with some child elements:
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'; } });}.content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1;}<div style="display: flex; flex-direction: row; gap: 16px"><div style="display: flex; flex-direction: column; width: 200px; border: 1px solid black; padding: 16px"><h3 style="width: 100%; background-color: #bbb">Heading 1</h3><p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p><div style="margin-top: auto"><button type="button" class="collapsible-controller">Open Collapsible</button><div class="content"><p>Lorem ipsum...</p></div></div></div><div style="display: flex; flex-direction: column; width: 200px; border: 1px solid black; padding: 16px"><h3 style="width: 100%; background-color: #bbb">Heading 2</h3><p>Lorem ipsum dolor sit amet.</p><div style="margin-top: auto"><button type="button" class="collapsible-controller">Open Collapsible</button><div class="content"><p>Lorem ipsum...</p></div></div></div></div>All child elements use flex as layout aswell to implement the following layout:
+-------------+-------------+| Heading 1 | Heding 2 |+-------------+-------------+| Content | Content || | || | || | || Collapsible | Collapsible |+-------------+-------------+All elements should have equal height. While the content section should have a variable height and be positioned right beneath the heading, I want the collapsible element at the bottom of the parent element. That part works fine using flex layout and margin-top: auto on collapsible. I want to preserve the whitespace between the content and the collapsible element when opening collapsible: it should expand downwards accordingly. For some reason, the collapsible element expands upwards instead of the desired downwards direction - at least for element 2 in the MWE when it is the only expanded collapsible.
I am pretty sure it has something to do with flex-layout and margin: auto, but I don't know how ti implement both the layout and the desired downward expansion while preserving the whitespace.
Unwanted:
+----------------------+--------------------+| Heading 1 | Heding 2 |+----------------------+--------------------+| Content | Content || | || | Collapsible (Open) || Collapsible (Closed) | Lorem ipsum... |+----------------------+--------------------+Desired:
+----------------------+--------------------+| Heading 1 | Heding 2 |+----------------------+--------------------+| Content | Content || | || | || Collapsible (Closed) | Collapsible (Open) || | Lorem ipsum... |+----------------------+--------------------+Code for the collapsible element: https://www.w3schools.com/howto/howto_js_collapsible.asp