React: CSS not recalculating heights in grid-container when state changes

Question

I have a wrapper div containing three elements: headerContainer, diagramContainer, labelContainer. The wrapper div has a fixed height and I want all elements to fill the wrapper. The diagramContainer is supposed to change its height dynamically depending on the height of the label container when the state changes (see images). If I reload the page, everything is working fine, all elements take the space like they're supposed to (image 1). However, once I change the state and the content and the container heights change, the wrapper div with the grid does not recalculate the necessary heights and the labelContainer overflows (image 2).

1. State on reload (everything's fine):

2. Change of state without page reload resulting in change of height of labelContainer (labelContainer overflows/diagramContainer is not resized):

3. Expected result (height of containers dynamically change on state change):

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 (needs specified height to be displayed)
        // ...Diagram code...
    </div>
    <div className={styles.labelContainer}>
        // LabelContainer (can change height 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 help would be really appreciated!

Answer 1

Okay I have found a solution based on this post. Setting the grid-template-columns to "auto minmax(0,1fr) auto" instead of "auto 1fr auto" does achieve the expected result. The labelContainer resizes without overflowing depending on its content and diagramContainer takes up the rest of the space.

Solution:

.wrapper {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto; /* change it to this */
    grid-template-columns: 100%;
}

.labelContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}