In a container div, I have three elements: headerContainer, diagramContainer, labelContainer. The container has a fixed height and I want all elements to fill it. The diagramContainer should adjust its height dynamically based on the labelContainer's height when the state changes (refer to images). Upon page reload, everything displays correctly (image 1). However, after changing the state causing the heights of the containers to change, the grid does not recalculate the heights resulting in overflow from the labelContainer (image 2).
State on reload (working fine): https://i.sstatic.net/mNqAb.png
Changed state without reload (labelContainer overflows/diagramContainer does not resize): https://i.sstatic.net/LlmJg.png
Expected outcome (containers' heights adapt on state change): https://i.sstatic.net/kVn5U.png
JSX:
<div className={styles.wrapper}> // Grid Container (fixed height)
<div className={styles.headerContainer}>
<h3>Diagram</h3>
// Header (auto height)
</div>
<div className={styles.diagramContainer}>
// diagramContainer (height required for display)
// ...Diagram code...
</div>
<div className={styles.labelContainer}>
// LabelContainer (height can change on state change)
// ...LabelContainer code...
</div>
</div>
CSS:
.wrapper {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
.labelContainer {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
How can I achieve this? Any assistance would be greatly welcomed!