Christa Christa - 8 days ago 5
CSS Question

Display whole div without scroll-bar - flexbox

I am building a single-page website, and would like each section to have a minimum height of 100%. While that works, if a div has more content than that the container div does not extend to fit the content, leaving me with an ugly scroll bar.

HTML

<div id="general">
<div id="home">
<main>
<div class="main" id="home_main">
<h1 id="head_home">/NAME GOES HERE</h1>
<h3 id="tag_home">Funky tagline here</h3>
</div>
</main>
</div>
<div id="about">
<main>
<div class="main">
<h1 id="head_about">About</h1>
<p id="para_about">Hide at bottom of staircase to trip human find something else more interesting paw at beetle and eat it before it gets away, rub whiskers on bare skin act innocent. Kitty loves pigs eat from dog's food missing until dinner time, and spend all night ensuring people don't sleep sleep all day or where is my slave? I'm getting</p>
</div>
</main>
</div>


CSS

#general {
width: 100%;
min-height: 100vh !important;
height: 100%;
position: absolute;
right: 0;
z-index: -200;
}

#home {
min-height: 100VH;
background: yellow;
}

#about {
min-height: 100vh;
background: blue;
}

main {
height: 100vh;
width: 90%;
min-height: 100% !important;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
resize: both;
overflow: auto;
border: 3px solid black;
}

.main {
width: 80%;
padding: 40px;
resize: both;
overflow: visible;
text-align: center;
}


Here is the jsfiddle of my work so far: https://jsfiddle.net/chris2001/jqwqxL6n/1/

Thank you to everyone for your help :)

Answer

Switch your height and min-height definitions so that main is told to be 100% high and at least 100vh:

main {
    /* height: 100vh; min-height: 100% !important; */ 
    height:100%; min-height: 100vh;
    ...
}

EG: https://jsfiddle.net/jqwqxL6n/3/