Thanks for your help. But your sugggestion does not work. Viewport = the browser's window size. It should fit within window's area for the row 2. With grid-template-rows 100px 100vh, the page has a height that exceed the page: page + 100px. By page I mean the area that is visible to the eye without needing to scroll.
When using height on divs in CSS: 100%, the element is usually enclosed within the block area it belongs to. But here I have a grid, and I cannot really use 100%. CSS grids are advanced and there are many possible parameters like fit-content, etc, but it did not work.
I could hard code the second row's height to be the size I want. But then it will be ugly CSS. Because the page will not be good on different sizes of windows.
What is not clear in what I describe as my problem? Just ask.
1. A CSS grid, using display:grid
2. Two rows using grid-templat-rows.
grid-templat-rows: 100px XXX (the unknown)
3. A paragraph in row 2 within a wrapper div with overflow: auto. The paragraph has 10 pages of text as an example.
The problem is that the paragraph will be big and scrolls will appear on the window itself. SCrolls should only appear on the wrapping div due to overflow: auto. An overflow must happen because the grid row should fit within the visible page area.