Suppose you have some text in your ionic React page that is very large, so you want it to scroll rather than fill the entire page, then the following styles will help a lot:

 Some Text 

But let's say, I have a page with some content and a footer, for example like this:

  
Search Detail Page
  Some Search Result Details  
 Description
 
 
This is the content that matters to me. I want this to scroll when this description gets so long, that the footer would start covering it
 
Now let's put a whole lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: 
 
    Some shiny footer content   

On mobile, it looks like this:

Please note that the description content is not scrollable because the height of dev is not limited. The problem is, we need to define a "max-height" but we can't do that because the page size will vary between different devices and it depends on the footer height.

Any suggestions? This seems to be a common question but I can't find the answer.

I tried this:

useEffect(() => { setTimeout(() => { const h2Height = document.querySelector('h2').clientHeight; const itemHeight = document.querySelector('ion-item').clientHeight; console.log('Header Height:', h2Height); // sadly, this is 0 at init time. But then works on reload console.log('Item Height:', itemHeight); if (descriptionRef.current) { descriptionRef.current.style.height = `calc(100% - ${h2Height + itemHeight}px - 2em)`; } }, 100); // we need this 100ms timeout, since otherwise the heights are not available and equals 0 at load time }, []); //... 
 Description
 
Some very long detailed description

This only works when I reload the page because on the first load bothh2HeigthanditemHeightshow up as 0