Make height 100% of page?

Question

I'm experimenting with Flexbox a bit and I was wondering whether there is a property, such as flex: 1, that allows the height of an element to be 100% of the page height without adding scroll bars to scroll down. If I was to resize it, it would stick and not add scroll bars. I hope you understand. I added a fiddle with height just set at 1000px and I was hoping if any of you guys/girls would know how to set it to be 100% of the page.

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

use height:100vh in .wrapper and remove default margin from body

 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> 

Answer 2

Just remove the default margin from the body and add min-height to your parent div wrapper like this:

body {
    margin: 0px;
}
.wrapper {
    min-height: 100%;
    display: flex;
}

Answer 3

Maybe an alternative is to set a ´position:absolute´ to get height:100% working properly. Also you can set display:table for the main container, and display:table-cell to containers inside to fit the height:100%

.wrapper {
    display:table;
    position:absolute;
    width:100%;
    height:100%;
}

.box-1 {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width: 200px;
    background-color: #2ABB9B;
}

.box-2 {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width: 200px;
    background-color: #16A085;
}

Example working: https://jsfiddle.net/mL594h73/1/