min-height 100vh 创建垂直滚动条，即使内容小于视口

Question

我正在将 min-height: 100vh; 应用于 flexbox 容器，当我使用 justify-content: space-around;

时我得到了一个垂直滚动条

我不想强制调整高度，但我不明白为什么会有滚动条，因为内容的尺寸比视口小。

* {
  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.github.io/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>

Answer 1

添加 flex-grow 似乎可以解决问题：

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/

不知道为什么，但是 .wrapper 上的 height: 100% 似乎还不够，它需要 flex-grow。我认为 justify-content: space-around 中有一些额外的白色-space 增加了高度。对我的推理没有信心，但它似乎有效...

Answer 2

根据@Jazcash 上面的回答，还可以进一步简化。

本质上我们需要将 min-height: 100vh 移动到父元素，并将 display: flex 应用于它。 flex-grow 不是必需的。

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.github.io/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>

min-height 100vh 创建垂直滚动条，即使内容小于视口

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

html

css

flexbox

viewport-units