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

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.

I would like to consider the following 3 situations:

Both content divs are open (visible) and have scrollbars. In this case I want them both to occupy half of the available space.
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.
Both content divs are closed. In this case I want the title div to be on top of the container.

Implemented features

If both divs have scrollbars and are open, the available space will be evenly distributed.
If one is closed, the other will fill the available space. If both are off, only the title will be displayed.

Unimplemented features

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.
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.

This is the structure of HTML

  Header 1 
  Lorem
 Lorem
 Lorem
 Lorem
 Lorem
 Lorem
 Lorem
 Lorem
 Lorem
 
  Header 2 
  Ipsum
 Ipsum
 Ipsum
 Ipsum
 Ipsum
 Ipsum
 Ipsum
 Ipsum

This is the style I tried to apply. Please note that I'm using Sass.

.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; } }

This is the link to the code pen.

Things I’ve tried

I also tried using max-heigth: calc(50% - 35px) (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.
Only use flex-grow: 1 instead of flex-basis: calc(50% - 35px) and max-height : calc(50% - 35px) 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.