I have a main div, which is a child and is centered by a content div. This content div is siblings with a header div and footer div, which are children of a wrapper div. The content div is made to grow and that is what I want so that the content always takes up all the screen besides the header and footer div with their set sizes. And when I shrink thee screen small enough that the main div overflows the screen, which is what I want, I want to be able to scroll it back into the screen, however that does not work fully and it gets cut off. I already have margin on the main div, so that it overflows properly with the header and footer divs. The problem remains no matter what I do.
I've tried to set max/min-width on the content div and a variety of other things, even completely rethinking about how to do it and drawing it out. But I haven't come to a conclusion of how to have the main div scroll back to being visible and not cut off once it clips out.
html { height: 100%;}body { /* background:linear-gradient(90deg,#1a1536,rgb(40, 9, 90), rgb(18, 29, 87),#1a1536); */ height: 100%; overflow: hidden; margin: 0;}.text { ] white-space: nowrap; margin: 0; color: white;}#wrapper { display: flex; height: 100%; flex-direction: column;}/* HEADER */#header { height: 70px; width: 100%; background: black; border-bottom: solid white 1px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}#variant { margin-top: -10px;}/*CONTENT*/#content { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: auto; /* max-width:100%; min-width:100%; */}#main_div { position: relative; height: 675px; width: 1350px; /* background-color: aqua; */}/* FOOTER */#footer { width: 100%; height: 30px; background: black; border-top: solid white 1px; z-index: 1; display: flex; align-items: center; justify-content: space-evenly}<body><div id="wrapper"><div id="header"><h2 class="text" id="map">Map</h2><h1 class="text" id="variant">Variant</h1></div><div id="content"><div id="main_div"></div></div><div id="footer"><button class="text" id="return" onclick="index()">Return</button></div></div><script src="./script.js"></script></body>