Prevent grid layout overlap inside flex containers.

useDynamicMinHeight.js

import { useState, useLayoutEffect, useCallback } from "react";
import { flushSync } from "react-dom";

const useDynamicMinHeight = (ref) => {
  const [minHeight, setMinHeight] = useState(0);

  const updateMinHeight = useCallback(() => {
    if (ref.current) {
      flushSync(() => {
        setMinHeight(0);
      });
      setMinHeight(ref.current.scrollHeight);
    }
  }, [ref]);

  useLayoutEffect(() => {
    // Update minHeight on mount and whenever the ref changes
    updateMinHeight();

    // Handle window resize
    window.addEventListener("resize", updateMinHeight);

    // Cleanup
    return () => {
      window.removeEventListener("resize", updateMinHeight);
    };
  }, [updateMinHeight]);

  return minHeight;
};

export default useDynamicMinHeight;