Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the card and subsequently the entire page. However, the scrollable list remains locked at its original maxHeight of 100vh, which now only reaches halfway down the page. Is there a way to dynamically reset the maxHeight based on the updated page height? It's important to note that I am using material ui (JSS) for styling.
My current approach:
const List = ({ match }) => {
const [height, setHeight] = useState(0)
const ref = useRef(null)
console.log(ref)
useLayoutEffect(() => {
setHeight(ref.current.clientHeight)
}, [])
return (
<div className={classes.root}>
<Grid container justify="center" >
<Grid item xs={10} className={classes.filter}>
{renderFilter()}
</Grid>
</Grid>
<Grid container justify='center' className={classes.cardGrid}>
{!matches ? <Grid item xs={3} md={3} lg={3} style={{maxHeight: Math.max(height, '100vh')}} className={classes.list}>
<List>{renderedList()}</List>
</Grid> : drawer}
<Grid item lg={1} md={1} sm={0} xs={0}/>
<Grid item xs={10} md={6} lg={6} ref={ref} className={classes.detail}>
{renderDetail()}
</Grid>
</Grid>
</div>
);
};
export default SongList;