CSS scrolling-bad

scroll container, not page

by VieleFragen

HTML

<!DOCTYPE html> 

<html lang="en-us">

<head>
    <title>CSS Structure Test for Scrolling Content</title>
    <link type="text/css"
          rel="stylesheet"
          title="Scrolling Content Test"
          media="screen"
          href="file://D:/Server-BB/2022-12-07-grid_template/links_support/links_page.css">

</head>



<body>
    <div id="grid_container">

        <div class ="item1">
            <div id="main_title">
                This is div {main_title} inside grid div {item1}
            </div>
            <!-- end of div main_title -->
        </div>
        <!-- end of div item1 -->

        <div class="item2">
            <div id="website_nav_wrapper">
            
                <div id="website_nav_top">
                    <hr class="thick">
                </div>
                <!-- end of div website_nav_top -->

                <nav id="website_nav_items">
                    <ul>
                        <li><a href="">ul in nav {website_nav_items}</a></li>
                        <li><a href="">inside div {website_nav_wrapper}</a></li>
                        <li><a href="">inside grid div {item2}</a></li>
                    </ul>
                </nav>
                <!-- end of nav website_nav -->

                <div id="website_nav_bottom">
                    <hr class="thick">
                </div>
                <!-- end of div website_nav_bottom -->

            </div>
            <!-- end of div website_nav_wrapper -->

        </div>
        <!-- end of div item2 -->

<!-- =================================================================== -->
<!--                         TABLE OF CONTENTS                           -->
<!-- =================================================================== -->
        <div class="item3">
            <div id="toc_wrapper">

                <p>div {toc_wrapper} inside grid div {item3}</p>
    
                <nav id="toc_nav">
                    <details open="open" class="toc_submenu">
 ...

CSS

@charset "utf-8";

/*===== # (div) =====*/

/*
 Name some generic areas.
 'Main' is the only one that will scroll, so it needs an overflow attribute.
 */
.item1 {grid-area: title;}
.item2 {grid-area: sitenav;}
.item3 {grid-area: toc;}
.item4 {grid-area: main;}

#grid_container {
	display: grid;
/*
	If an area should span more than one column, put its name in each column.
	This grid is for three rows and two columns
*/
	grid-template-areas:
		"title title"
		"sitenav sitenav"
		"toc main";

/*
	If an area should span more than one column, put its name in each column.
	This grid is for three rows and two columns.
	'fr' is treated as an upper-boundary for the column counter
		and is treated as occupying space.
*/
grid-template-rows: min-content min-content 90%;
grid-template-columns: 200px auto;

/*
	grid-template-rows: 7vh 4vh 85vh ;
	grid-template-rows: min-content min-content 70%;
	grid-template-rows: 62px 35px 1fr;
	grid-template-rows: min-content min-content minmax(0,90%);
	grid-template-rows: 60px 30px 90px;
	grid-template-rows: min-content min-content fit-content(min-content); bad, use ([number]), not (min-content)

	grid-template-columns: 200px 1750px 1fr;
	grid-template-columns: 200px 90vw 1fr;
	grid-template-columns: 10vw 90vw 1fr;
*/
}
/* end of grid_container id */
	

/* ====================
main blocks of the page structure
==================== */
#main_title {
	text-align: center;
	color: Brown;
	font-size: 2.00em;
	font-weight: bold;
	background-color: DarkSeaGreen;
/*
	background-color: Cyan;      
*/
}



#website_nav_wrapper {
	background-color: Cyan;      
/*
*/
}


#toc_wrapper {
	background-color: Coral;
/*
	overflow: auto;
	background-color: LightYellow;
width: 35vm;
*/
}

main {
	overflow: auto;
/*
	background-color: MediumPurple;
	top: 100px;
	top: 72px;

	position: fixed;
	bottom: 0px;
	left: 200px;
	right: 0px;
	margin-left: 10px;
*/
}


/* ====================
contents of website_nav_wrapper
==================== */
#website_nav_items...