How to distribute space equally in one container div to two divs with switchable visibility and different content?-PHP Chinese Network Q&A

<p>I have a div container containing 4 divs. There are 2 headers and 2 content divs in it. Clicking on the headers will toggle the visibility of the content divs below them. </p> <p>I would like to consider the following 3 situations:</p> <ol> <li>Both content divs are open (visible) and have scrollbars. In this case I want them both to occupy half of the available space. </li> <li>1 content div is open with or without scrollbars. In this case I want it to take up all available space or the space it needs. </li> <li>Both content divs are closed. In this case I want the title div to be on top of the container. </li> </ol> <h3>Implemented features</h3> <ul> <li>If both divs have scrollbars and are open, the available space will be evenly distributed. </li> <li>If one is closed, the other will fill the available space. If both are off, only the title will be displayed. </li> </ul> <h3>Unimplemented features</h3> <ul> <li>When the bottom content div is closed and the top content div has scrollbars, the height of the top content div will only grow to half the height of the container. </li> <li>When both content divs are open without scrollbars, they will grow to 50% of the height of the container and create a blank space between the content div and the title div below. </li> </ul> <p>This is the structure of HTML</p> <pre class="brush:php;toolbar:false;"><div class='flex-container'> <div id='header1' class='header'> Header 1 </div> <div id='content1' class='header-content'> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> </div> <div id='header2' class='header'> Header 2 </div> <div id='content2' class='header-content'> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> </div> </div></pre> <p>This is the style I tried to apply. Please note that I'm using Sass. </p> <pre class="brush:php;toolbar:false;">.flex-container { display: flex; flex-direction: column; height: 300px; width: 150px; overflow-y: auto; } .header { display: flex; align-items: center; min-height: 35px; background-color: #99e9f2; cursor: pointer; } .header-content { flex-basis: calc(50% - 35px); flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; .item { padding: 3px 12px; background-color: #e3fafc; } }</pre> <p>This is the link to the code pen. </p> <h3>Things I’ve tried</h3> <ul> <li> I also tried using <code>max-heigth: calc(50% - 35px)</code> (title height is 35px), which solved the issue with the growing content div causing whitespace gaps to appear, but This also makes it so that if another content div is closed, the content div will not grow past that height. </li> <li>Only use <code>flex-grow: 1</code> instead of <code>flex-basis: calc(50% - 35px)</code> and <code>max-height : calc(50% - 35px)</code> can make the content div grow more than about 50% of the container height, but if a content div has more elements, it will cause the height of the content div to be uneven, resulting in uneven available space. Distribute evenly. </li> </ul><p><br /></p>

<!DOCTYPE html> <html lang="en-us"> <head> <title>Variable Percentage Height</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *, *::before *::after { margin: 0; border: 0; padding: 0; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; text-align: justify; } html, body { height: 100%; } body { font-size: 14px; } body { color: #000000; font-family: 'Segoe UI', 'Lucida Grande', -apple-system, BlinkMacSystemFont, 'Liberation Sans', sans-serif; } </style> <style> #container { height: 100%; } .content { overflow: auto; background-color: #eec1ff; position: relative; } .content::after { position: absolute; inset: auto 0 0 0; display: block; z-index: 1; text-align: center; } #content1::after { content: 'this is the bottom of content div #1'; } #content2::after { content: 'this is the bottom of content div #2'; } .header { height: 35px; line-height: 35px; background-color: #99e9f2; cursor: pointer; } .item { padding: 3px 12px; background-color: #e3fafc; position: relative; z-index: 2; } </style> </head> <body> <div id="container"> <div class="header" id="header1">Header 1</div> <div class="content" id="content1"> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> </div> <div class="header" id="header2">Header 2</div> <div class="content" id="content2"> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> </div> <script> (() => { const header1 = document.getElementById("header1"); const header2 = document.getElementById("header2"); const content1 = document.getElementById("content1"); const content2 = document.getElementById("content2"); let header1open = false; let header2open = false; header1.onclick = updateHeights; header2.onclick = updateHeights; updateHeights(null); /** * @param {MouseEvent} e */ function updateHeights(e) { const headerTotalHeight = header1.offsetHeight + header2.offsetHeight; if (e == null) { content1.style.display = "none"; content2.style.display = "none"; header1open = false; header2open = false; } else if (header1.contains(e.target)) { if (header1open) { header1open = false; content1.style.display = "none"; if (header2open) { content2.style.height = `calc(100% - ${headerTotalHeight}px)`; } } else { header1open = true; content1.style.removeProperty("display"); if (header2open) { content1.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; content2.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; } else { content1.style.height = `calc(100% - ${headerTotalHeight}px)`; } } } else if (header2.contains(e.target)) { if (header2open) { header2open = false; content2.style.display = "none"; if (header1open) { content1.style.height = `calc(100% - ${headerTotalHeight}px)`; } } else { header2open = true; content2.style.removeProperty("display"); if (header1open) { content1.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; content2.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; } else { content2.style.height = `calc(100% - ${headerTotalHeight}px)`; } } } } })(); </script> </div> </body> </html>