I am facing a challenge with two containers that need to share the height of their parent element. The second container is added dynamically when needed, and both containers may contain a lot of content, requiring scroll capabilities.
While I have a solution for creating a 50/50 split between the containers, I am exploring if it's possible to dynamically adjust their heights based on content.
.wrapper__container {
display: flex;
height: 100%;
max-width: 100%;
flex-wrap: wrap;
align-items: flex-start;
}
.inside__container {
flex: 0 0 100%;
max-width: 100%;
overflow-y: auto;
}
This snippet represents part of the wrapper component's render method:
render() {
const maxHeight = this.state.showDetails ? '50%' : '100%';
const minHeight = this.state.showDetails ? '50%' : '100%';
return (
<div className="wrapper__container">
<Config
itemsGreen={this.state.itemsGreen}
itemsRed={this.state.itemsRed}
changeItemCount={this.changeItemCount}
/>
<Container
itemCount={this.state.itemsGreen}
className="inside__container"
style={{
backgroundColor: 'green',
maxHeight,
minHeight
}}
onClick={this.handleClick}
/>
{this.state.showDetails && <Container
itemCount={this.state.itemsRed}
className="inside__container"
style={{
backgroundColor: 'tomato',
maxHeight,
minHeight
}}
/>}
</div>
)
}
I have created a CodePen where you can test the behavior by adjusting the item counts. Clicking on the green container will reveal the red one.
An ideal solution would be to limit the green container to a maximum height of 50% and allow the red container to occupy the remaining space. For instance, if the green container is only 20%, the red container should take up 80%.
In an optimal scenario, achieving this dynamic height adjustment should not require JavaScript calculations, but I am open to suggestions using either React or vanilla JavaScript.
The target browser compatibility required is IE11.
Edit: I have also included a new Pen which demonstrates the desired flexible behavior when dealing with fewer items.