关于flex一屏高度的问题

Question

如图示底部按钮被吃掉一半

<div class="views display-flex box-row">
            <div class="views-bd">
                <p>需要说明一下，因为一直有在看《HTTP权威指南》，觉得这是一本很值得称赞的一本高质量的书籍，书中内容涵盖很全面，而且配以插图，使得阅读起来很容易理解！无论是对于已经踏足开发领域的老手，还是刚接触相关领域的新手，都可以接触。所以很推荐大家从头到尾过一遍，我相信看过之后对某些概念将会有一个更深层次的理解！当然了，我的建议是对这本书多过几遍，因为这样才能加深映像同时加深理解！毕竟常言道：“书读百遍，其意自见、温故而知新等都说明了书需要多次阅读才能体会其意，才能从中读出更深层次的含义”！</p>
                <img src="image/banner (1).png" />
                <p>需要说明一下，因为一直有在看《HTTP权威指南》，觉得这是一本很值得称赞的一本高质量的书籍，书中内容涵盖很全面，而且配以插图，使得阅读起来很容易理解！无论是对于已经踏足开发领域的老手，还是刚接触相关领域的新手，都可以接触。所以很推荐大家从头到尾过一遍，我相信看过之后对某些概念将会有一个更深层次的理解！当然了，我的建议是对这本书多过几遍，因为这样才能加深映像同时加深理解！毕竟常言道：“书读百遍，其意自见、温故而知新等都说明了书需要多次阅读才能体会其意，才能从中读出更深层次的含义”！</p>
                <img src="image/banner (2).png" />
                <p>需要说明一下，因为一直有在看《HTTP权威指南》，觉得这是一本很值得称赞的一本高质量的书籍，书中内容涵盖很全面，而且配以插图，使得阅读起来很容易理解！无论是对于已经踏足开发领域的老手，还是刚接触相关领域的新手，都可以接触。所以很推荐大家从头到尾过一遍，我相信看过之后对某些概念将会有一个更深层次的理解！当然了，我的建议是对这本书多过几遍，因为这样才能加深映像同时加深理解！毕竟常言道：“书读百遍，其意自见、温故而知新等都说明了书需要多次阅读才能体会其意，才能从中读出更深层次的含义”！</p>
                <img src="image/banner (3).png" />
            </div>
            <div class="views-footer">按钮</div>
        </div>

        .display-flex, .swiper-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
        .box-row {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

Answer 1

外面套个div