min-height 100vh creates vertical scrollbar even though content is smaller than viewport

html css flexbox viewport-units
George Katsanos picture George Katsanos · Feb 28, 2017 · Viewed 40.3k times · Source

I'm applying min-height: 100vh; to a flexbox container and I get a vertical scrollbar when I use justify-content: space-around;

I don't want to force the height, but I don't understand why the scrollbar is there since the contents have smaller dimensions than the viewport.

Answer

Jazcash picture Jazcash · Feb 28, 2017

Adding flex-grow seems to do the 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/

Not sure why, but height: 100% on .wrapper doesn't seem to suffice, it needs flex-grow instead. I think there was some extra white-space coming from justify-content: space-around that was adding to the height. Not confident in my reasoning, but it seems to work...

Related questions

Are Flexbox and vh height units not compatible in IE11?

I'm trying to use a flexbox-based layout to get a sticky footer for my page. This works well in Chrome and Firefox, but in IE11 the footer sits just after my main content. In other words, the main content isn't …

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More