A bit late to this party, but I had a similar question, but without the parent constraint (I have a specific parent size). For anyone finding this question for that easier case, you can just use:

<CircularProgress size="1rem" />

and in my case

<CircularProgress size="1rem" color="inherit" />

would something like this work for you? This would rely on the parent being assigned a fixed width and height (which is missing in my code), but your question implies that this is the case for you.

export default function Demo() {
  const [parentSize, setParentSize] = useState(0);
  const parentRef = useRef(null);

  useEffect(() => {
    const { clientHeight, clientWidth } = parentRef.current;

    setParentSize(Math.min(clientHeight, clientWidth));
  }, []);

  return (
    <div ref={parentRef}>
      <CircularProgress size={0.8 * parentSize} />
    </div>
  );
}

I’m not 100% sure, but I think CSS Element Queries might solve this also

This could not be an official way. However, you could use this as a little hack when nothing goes right.

<CircularProgress style={{padding: "10px"}} />

Adjust the padding to resize and adjust margin to locate.

A simple approach to setting the size relative to the parent.

<CircularProgress size='80vh' />

I’d like to show the MUI CircularProgress component as big as needed to nearly fill the parent div of an unknown size. Let’s say, the size should be 0.8 * min(parent_height, parent_width). I tried fooling with max-width and whatever with no success.

I could use some useDimension hook and measure the parent’s size, but I consider it to be the last resort. There must be a pure CSS solution, am I right?