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:linear-gradient(aqua, blue,red,purple);
}
/* 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>