Geek Answers Handbook

Min-height 100vh creates a vertical scrollbar, although the content is smaller than the viewport

I apply min-height: 100vh; to the flexbox container, and when using justify-content: space-around;

I don’t want to force the height, but I don’t understand why the scrollbar exists because the content is smaller than the viewport.

 * { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 0; padding: 0; } .wrapper { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-around; } 
 <link href="https://necolas.imtqy.com/normalize.css/5.0.0/normalize.css" rel="stylesheet"/> <div class="wrapper"> <div> <h1>min-height: 100vh;</h1> <h2>why is there a scrollbar here?</h2> </div> <div> Be sure to expand window. <a href="#">skill one</a> <a href="#">skill one</a> <a href="#">skill one</a> <a href="#">skill one</a> </div> </div>
+7
html css flexbox vh
source share
2 answers

Adding flex-grow is like a trick:

 body { min-height: 100vh; display: flex; flex-direction: column; } .wrapper { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-around; }

https://jsfiddle.net/uxgaaccr/2/

I don't know why, but height: 100% on .wrapper doesn't seem to be enough, it needs flex-grow . I think that with justify-content: space-around , extra white space was added that added to the height. Not sure about my reasoning, but it seems to work ...

+4
source share

Based on @Jazcash's answer above, it can be simplified even further.

Essentially, we need to move min-height: 100vh to the parent element and apply display: flex to it. flex-grow not required.

https://jsfiddle.net/gkatsanos/uxgaaccr/3/

 * { box-sizing: border-box; } body { min-height: 100vh; display: flex; } .wrapper { display: flex; flex-direction: column; justify-content: space-around; } 
 <link href="https://necolas.imtqy.com/normalize.css/5.0.0/normalize.css" rel="stylesheet"/> <div class="wrapper"> <div> <h1>min-height: 100vh;</h1> <h2>why is there a scrollbar here?</h2> </div> <div> Be sure to expand window. <a href="#">skill one</a> <a href="#">skill one</a> <a href="#">skill one</a> <a href="#">skill one</a> </div> </div>
+1
source share

More articles:


All Articles