I'm not overly good with CSS, so a lot of it I'm in the process of learning. My problem at the moment is that I'm trying to get my react components to utilize the full height of the browser window. I've settled for utilizing Display: 'grid' and gridTemplateRows: '1fr' for this at the moment, but I'm having an odd effect.

As you can see above, 1FR seems to only utilize a set size, not the full page size. Down the chain after login, I will also have datagrids that need to utilize the page size, so they can resize themselves as needed... but the current issue I've run into, is that the containers aren't the size of the page, but only the size of the elements inside.

I've tried using height:'100%' in different parts, but the issue persists, as there seems to be something setting the size of the containers to not be page-size, but I've never set (as you can see in the inspector below) anything to have a hard coded height size.

UPDATED EDIT: I created Index.css for use, which contains a simple set of:

html, body {height: 100%;}
#ReactRoot {min-height: 100vh;}

I tried 2 things:

1. in the index.html in public, and index.css in same public folder, I put to try and make it use the CSS, but it had no effect. Not sure where it is wrong in this case.

2. in index.js, I imported index.css (same as above, but it is now in my SRC folder), via

import "./index.css";

This had this result. The top level div, ReactRoot, is fullscreen... everything inside, even with 100% height set in inline-css within the modules, does not do 100% height.

however, everything further down does not seem to obey the 100% rule. Setting inline CSS in modules to height:"100%" did not have any effect