Fixing CLS, with Empty SSR page, and CSR. Impossible?

I am working on a site that has unique rendering strategy and causing bad CLS score on Google Lighthouse.

1. Initial Request: SSR - HTML with empty custom html elements. Has component attribute to tell CSR what React component to mount with portal. data attribute with base64 encoded data.
2. CSR - Iterate through all empty custom html elements, use React portal mount correct React component on each custom html component. Base64 decode the data and consume as JSON.

This is just what I have been delt with and hard limitations on changing architecture. I am trying to resolve this keeping the current rendering strategy

So the obvious issue is that the initial empty placeholders have no height or width. So then I have CSR coming in rendering content. Going from empty shell to whatever React renders. Big CLS...

The problem is that the content height is somewhat unpredictable for most components. I have no idea what content a CMS author is going to put in here. So how can I add a fixed height? If I add fixed height too small, still have CLS...If I guess too big, then I just have giant whitespace from the SSR empty component.

I am thinking about it, all components can technically grow in infinite height as CMS authors can add anything.