Not entirely certain if this is the most efficient approach, but I utilized a custom hook (not created by me) to obtain the clientRect of the initial item and then applied that as the max-height on the clientRect
/**
* Create a ref and BoundingClientRect that will update when the ref changes
* due to resize or scroll events
* https://gist.github.com/morajabi/523d7a642d8c0a2f71fcfa0d8b3d2846?permalink_comment_id=3925412#gistcomment-3925412
* @returns [rect, ref]
*/
export const useRect = <T extends Element>(): [
DOMRect | undefined,
MutableRefObject<T | null>
] => {
const ref = useRef<T>(null);
const [rect, setRect] = useState<DOMRect>();
const set = () => setRect(ref.current?.getBoundingClientRect());
const useEffectInEvent = (
event: "resize" | "scroll",
useCapture?: boolean
) => {
useEffect(() => {
set();
window.addEventListener(event, set, useCapture);
return () => window.removeEventListener(event, set, useCapture);
}, []);
};
useEffectInEvent("resize");
useEffectInEvent("scroll", true);
return [rect, ref];
};
key points:
defining ref:
<Grid xs={3}>
<Box ref={ref}>
{*/ brief item content /*}
</Box>
</Grid>
setting the height (for the fourth item):
<Grid xs={3}>
<Box
sx={{ maxHeight: rect.height, overflowY: "scroll" }}
>
{/* lengthier item content */}
</Box>
</Grid>
here's the complete sandbox