In my layout, there are two columns displayed in a grid. The first column consists of two items (div-1 and div-2), while the second column has only one item (div-3). My goal is to have the height of div-3 adjust based on any changes in div-1 and div-2.
The desired outcome is for both columns to have equal height using the provided css below.
<Grid>
<GridItem>
<Grid>
<GridItem >
<SomeComponent className="div-1"/>
</GridItem>
<GridItem >
<SomeComponent className="div-2"/>
</GridItem>
</Grid>
</GridItem>
<GridItem >
<Grid>
<GridItem>
<SomeComponent className="div-3"/>
</GridItem>
</Grid>
</GridItem>
</Grid>
Current css:
.div-1 {
max-height: 19rem;
min-height: 6rem;
overflow-x: hidden;
overflow-y: auto;
}
.div-3 {
max-height: 30rem;
overflow-x: hidden;
overflow-y: auto;
}
I attempted to use useRef in react but encountered difficulties in passing states between components. Some items require scrollbars to be displayed, and I am trying to find a solution without removing them.