CSS를 사용하는 두 개의 전체 높이 페이지 flex

Question

전체 높이가 두 페이지 인 간단한 웹 페이지를 만들고 싶습니다. 이 두 페이지는 가운데에 하나의 블록과 아래쪽에 작은 텍스트 (아이콘 포함)가 있습니다. 두 번째 페이지에서 볼 수 있듯이 https://jsfiddle.net/f93wm58r/

<div id="how-to" class="section how-to"> 
    <div id="title" class="title">title</div> 
    <div id="code" class=" code">title</div> 
    <div id="view-more" class="view-more"> 
     <span>View intructions</span> 
     <br/> <!-- other option ? --> 
     <i class="fa fa-arrow-down view-more--arrow"></i> 
    </div> 
</div> 
<div id="instructions" class="section instructions"> 
    <div id="intructions" class="instructions">instructions</div> 
    <div id="view-more" class="view-more"> 
     <span>Go back</span><br/> 
     <i class="fa fa-arrow-up view-more--arrow"></i> 
    </div> 
</div> 


body { 
    font-family: "Source Sans Pro","Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 1.3rem; 
    background-color: #FFF; 
} 
.section { 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    flex-flow: column wrap; 
    align-content: space-between; 
} 
.title { 
    margin-top: auto; 
    font-weight: bold; 
    font-size: 4rem; 
} 
.view-more { 
    color: #D1D1D1; 
    text-align: center; 
    cursor: pointer; 
    margin-top: auto; 
    margin-bottom: 10px; 
} 
.view-instructions { 
    margin-top: auto; 
} 
.view-more--arrow { 
    font-size: 2rem; 
} 

텍스트가 중심되지 않은 : 여기

은 예입니다. 내가 무엇이 누락 되었습니까?

추가 문제

이 아니에요 반응 : 페이지를 줄여보십시오 및 내용은 당신이 그랬던 것처럼 당신은 두 번째 페이지 제목 auto의 margin-top을 준하지 않은 두 개의 열

Answer 1

에 표시됩니다 .title.

.instructions { 
    margin-top: auto; 
}