A container that can have many elements but will not influence its container height, to do that, it should be linked to another element inside the same container to get its height from.

LinkedHeightContainer.js

const LinkedHeightContainer = ({ children, link }) => {
  const ref = useRef(null);

  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      const entry = entries[entries.length - 1];
      const height = `${entry.contentRect.height}px`;
      ref.current.style.height = height;
    });

    observer.observe(link.current);

    return () => {
      observer.disconnect();
    };
  }, [link]);

  return (
    <div style={{ height: 0 }}>
      <div style={{ overflowY: "auto" }} ref={ref}>
        {children}
      </div>
    </div>
  );
};