I've looked through a number of similar articles, but have yet to be able to solve this.
I want to have a page basically fixed to the height of the browser. There is a tool panel on the left side, and then two panels on the the right side with a footer beneath. I want to ultimately y-scroll these two panels independently (for now, just the middle one), preferable leaving the footer in place.
I'll put the code example here, but it's probably easier to see on a codepen. Forgive the garish colors - just keeping track of div borders.
* { box-sizing: border-box; padding: 0; margin: 0;}html,body { height: 100%; margin: 0;}.flex-container-row { display: flex; flex-direction: row; /* flex-wrap: wrap; */}.flex-container-column { display: flex; flex-direction: column; flex-wrap: wrap;}.flex-jfs { justify-content: flex-start;}.flex-afs { align-content: flex-start;}.flex-ac { align-content: center;}.flex-aic { align-items: center;}.flex-jc { justify-content: center;}.flex-jsb { justify-content: space-between;}.body-content { height: 100vh; width: 100vw; flex-direction: row-reverse; border: 4px solid cyan;}.toolbar-left { background-color: blue; padding: 5px; border-right: 2px solid white; gap: 20px; height: 100vh; color: white;}.content-layout { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-areas: "main""footer"; grid-template-rows: 1fr 25px; border: 4px solid green; /*background-color: rgba(0, 125, 0, .3)*/}main { flex: 1 0 auto; grid-area: main;}footer { grid-area: footer; /*background-color: rgba(125, 125, 125, 0.5);*/ background-color: lightGray; color: black; border: 4px solid gray;}.main-container { width: 100%; display: grid; grid-template-columns: 2fr 1fr; border: 4px solid red; /*background-color: rgba(255, 0, 0, 0.5)*/}.data-container-with-loading { display: flex; flex-direction: column; border 4px solid yellow; /*background-color: rgba(125, 125, 0, 0.75)*/}.loading { display: none;}.data-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; color: black; border: 4px solid purple; background-color: rgba(125, 0, 125, 0.5)}.side-container { display: flex; flex-direction: column; /* background: var(--root-bg-color); color: var(--root-fg-color); font-size: 1em;*/ padding: 3px; min-height: calc(1vh - 30px); border: 4px solid orange; /*background-color: rgba(200, 125, 0, 0.5)*/}p { font-size: 17pt; margin: 10px;}<html><body><div class="body-content flex-container-row flex-jfs flex-afs"><div class="content-layout"><main><div class="main-container"><div class="data-container-with-loading"><div class="data-container"><h2 style="color: white">Scroll This Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Ut diam quam nulla porttitor massa id neque. A erat nam at lectus urna duis convallis. Amet luctus venenatis lectus magna fringilla urna porttitor. Varius quam quisque id diam vel. Ut aliquam purus sit amet luctus venenatis lectus magna. Sed adipiscing diam donec adipiscing tristique. Tincidunt praesent semper feugiat nibh sed. Sit amet purus gravida quis blandit turpis cursus in. Etiam tempor orci eu lobortis elementum nibh. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim diam vulputate ut pharetra sit amet. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Purus semper eget duis at tellus at.</p><p>At tempor commodo ullamcorper a lacus vestibulum sed arcu. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Massa placerat duis ultricies lacus sed turpis. Et molestie ac feugiat sed lectus vestibulum. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Tincidunt vitae semper quis lectus. Consequat semper viverra nam libero justo. Ullamcorper sit amet risus nullam eget felis eget. Et magnis dis parturient montes nascetur. Quis commodo odio aenean sed adipiscing diam donec. Adipiscing at in tellus integer.</p><p>Enim ut tellus elementum sagittis vitae et leo duis. Porta nibh venenatis cras sed felis. Bibendum est ultricies integer quis auctor elit sed vulputate. Amet cursus sit amet dictum sit amet justo donec. Eu lobortis elementum nibh tellus molestie nunc. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Et malesuada fames ac turpis egestas sed tempus urna et. Nec feugiat in fermentum posuere urna nec tincidunt praesent. Purus in mollis nunc sed id semper risus. Nec ullamcorper sit amet risus nullam eget felis. Sollicitudin aliquam ultrices sagittis orci a scelerisque.</p><p>Felis eget nunc lobortis mattis aliquam faucibus. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Enim tortor at auctor urna. Metus dictum at tempor commodo ullamcorper a. Massa id neque aliquam vestibulum morbi blandit cursus. Lorem mollis aliquam ut porttitor. Tristique risus nec feugiat in fermentum posuere. Purus in mollis nunc sed id semper. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Nisl pretium fusce id velit ut.</p><p>Consectetur a erat nam at lectus urna duis convallis convallis. Gravida quis blandit turpis cursus. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Bibendum est ultricies integer quis auctor elit sed vulputate. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Volutpat sed cras ornare arcu dui vivamus arcu felis. Ultrices dui sapien eget mi proin sed libero enim sed. Nunc sed velit dignissim sodales ut eu. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Massa sed elementum tempus egestas sed sed risus. Auctor elit sed vulputate mi.</p></div><!-- data container --></div><!-- data contain with loading --><div class="side-container"><h4>Side Data Goes Here</h4></div></div></main><footer><h3>footer</h3></footer></div><div class="toolbar-left"><p>toolbar</p></div></div></body></html>