I'm working on a layout using Flexbox, where I have multiple containers, each containing collapsible content. When I toggle the expansion/visibility of one collapsible container, all the containers expand in height, which is not the desired behavior. The content of the other boxes doesn't become visible, but their heights increase, matching the one that was toggled.
Expected behavior:
When toggling the visibility of .snippet-text-information by clicking the .snippet-button''+'' button, only the .snippet-box containing the toggled element should adjust its height accordingly. Other .snippet-box containers should remain at their original height.
Actual behavior:
When I toggle the expansion of one .snippet-text-information element, all .snippet-box containers expand in height, even though only the content of one box is becoming visible. The height of each .snippet-box matches the expanded content of the toggled box.
Code:
HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Minimal Reproducible Example</title><style> /* CSS styles will go here */</style></head><body><div class="snippet-box-container"><div class="snippet-box"><div class="snippet-button-box"><button class="snippet-button" data-target="#box1">+</button></div><div class="snippet-text-box"><div class="snippet-text-title">Lorem Ipsum</div><div class="snippet-text-content">Lorem ipsum dolor sit amet</div><div class="snippet-text-information" id="box1"><div class="list-title">Lorem ipsum dolor sit amet:</div><ol><li>Item 1</li><li>Item 2</li></ol></div></div></div><div class="snippet-box"><div class="snippet-button-box"><button class="snippet-button" data-target="#box2">+</button></div><div class="snippet-text-box"><div class="snippet-text-title">Lorem Ipsum</div><div class="snippet-text-content">Lorem ipsum dolor sit amet</div><div class="snippet-text-information" id="box2"><div class="list-title">Lorem ipsum dolor sit amet:</div><ol><li>Item 1</li><li>Item 2</li></ol></div></div></div></div><script> function toggleExtension() { const buttons = document.querySelectorAll('.snippet-button'); buttons.forEach(button => { button.addEventListener('click', () => { const target = document.querySelector(button.getAttribute('data-target')); target.classList.toggle('active'); }); }); } window.onload = toggleExtension;</script></body></html>CSS:
.snippet-box-container { display: flex; justify-content: center; gap: 25px; width: 100%; padding: 0px 15px;}.snippet-box { display: flex; flex-direction: column; min-height: 180px; flex-basis: 290px; background-color: white; box-shadow: 0px 0px 20px rgba(128, 128, 128, 0.1); border-radius: 15px; box-sizing: border-box;}.snippet-button-box { display: flex; justify-content: flex-end;}.snippet-button { height: 35px; width: 35px; background-color: rgb(232, 230, 230); border-radius: 50%; margin: 20px; border: none;}.snippet-text-box { padding: 25px; gap: 5px;}.snippet-text-title { font-size: 22px; font-weight: 800;}.snippet-text-content { color: rgb(184, 184, 184);}.snippet-text-information { display: none;}.snippet-text-information.active { display: block;}Codepen: https://codepen.io/The-Now/pen/MYWoVQL
I've tried changing display: none to visibility_hidden and tried adding different height properties to the .snippet-text-information, but it didn't work.
I suspect this might be related to how Flexbox handles element heights, but I'm unsure of the exact cause.
Any insights on why this is happening or suggestions on how to fix it with minimal structural changes?
Thanks in advance!