div填满页面问题

作为前端小透明，最近遇到一个需要两个div在垂直方向上填充满整个页面的问题，具体效果如下：

<div class="out">
    <div class="one">1</div>
    <div class="two">2</div>
</div>

在网上找到的方法如下：

.out {
    position: relative;
    height: 100%;
    padding-top: 50px;
}
.one {
    position: absolute;
    top: 0,
    left: 0,
    width: 100%;
    height: 50px;
}
.two {
    height: 100%;
}

这个方法得到的效果如下：

这里页面的总高度要大于浏览器的窗口的高度，如果需要将页面的高度固定为浏览器窗口的高度需要这么做：

.out {
	display: flex;
	flex-flow: column;
	height: 100%;
}
.one {
	width: 100%;
	height: 50px;
}
.two {
	height: 100%;
}