html - 使高度为页面的 100%？

Question

我正在尝试使用 Flexbox，我想知道是否有一个属性，例如 flex:1，允许元素的高度为页面高度的 100%，而无需添加滚动条来向下滚动。如果我要调整它的大小，它会粘住并且不会添加滚动条。我希望你明白。我添加了一个高度设置为 1000px 的 fiddle ，我希望你们中的任何人都知道如何将它设置为页面的 100%。

https://jsfiddle.net/mL594h73/

HTML:

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>  

CSS:

.wrapper {
display: flex;
}

.box-1 {
flex: 1;
width: 200px;
height: 1000px;
background-color`enter code here`: #2ABB9B;
}

.box-2 {
flex: 1;
width: 200px;
height: 1000px;
background-color: #16A085;
}

Answer 1

在 .wrapper 中使用 height:100vh 并从 body 中移除默认的 margin

body {
  margin: 0
}

.wrapper {
  display: flex;
  height: 100vh
}

.wrapper>div {
  flex: 1;
  width: 200px;
}

.box-1 {
  background-color: #2ABB9B;
}

.box-2 {
  background-color: #16A085;
}

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>