This one has me stumped, but maybe it's not possible. I have an html layout with nested divs and I want all the divs to fit the viewport, but the last child scrolls when there is overflow content; not the viewport/browser scrolling. So in the image below, I don't want the browser to scroll, I want the green div to scroll. I would like "everything" to be responsive to the viewport, don't want to fix any height in pixels. If the viewport is expanded, the green content expands, etc.
[![scroll green not browser window][1]][1][1]: https://i.sstatic.net/Fy3WGpKV.png
html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height:100vh;}.div-1 { flex: 1; display: flex; flex-direction: column; background-color: red;}.div-2 { margin:8px; flex: 1; display: flex; flex-direction: column; background-color: white;}.div-3 { margin: 8px; flex: 1; display: flex; flex-direction: column; background-color: blue;}.div-scroller { margin: 8px; height: 100%; display: flex; flex-direction: column; background-color: green; overflow-y: scroll;}<html><body><div class="div-1"> red <div class="div-2"> white<div class="div-3"> blue<div class="div-scroller"><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/><span>green </span><br/></div></div></div></div></body></html>