Центрированная гибкая коробка с дисплеем = элемент, вызывающий нечитаемое переполнение экрана

Question

У меня есть три столбца в контейнере гибкой коробки, два видимых и один скрытый. Первые два имеют очень мало контента; у третьего есть несколько страниц контента. Я хочу, чтобы все три были первоначально центрированы по вертикали, но поскольку третий будет переполняться со страницы, я хочу, чтобы она (когда она была видимой) заканчивалась заполнением до верхней части страницы, а затем прокручивалась вниз. Как я могу сосредоточить элементы в гибкой коробке, которая естественным образом перетекает?

Что происходит в моем коде ниже, так это то, что когда третий столбец становится видимым, он переполняется сверху и снизу страницы без прокрутки, так что невозможно прочитать первую часть содержимого.

HTML:

<div class="flex-container"> 
    <div class="column column-left"> 
      column one 
    </div> 
    <div class="column column-right"> 
     column two  
    </div> 
    <div class="column-hidden column" data-id="1"> 
     column three 
    </div> 
</div> 

CSS:

body{ 
    margin:0; 
} 

html, body{ 
height: 100%; 
} 

.flex-container{ 
height: 100%; 
display: -webkit-flex; 
    display: flex; 
-webkit-flex-direction: row; 
    flex-direction: row; 
-webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

.column{ 
    padding: 0 1em 0 1em; 
} 


.column-left{ 
    display: visible; 
} 
.column-right{ 
    display: visible; 
    border: none; 
    text-align: left; 
} 

.column-hidden{ 
    display: none; 
} 

Javascript:

//clicking on button does the following to show hidden column 
$('.column-left').removeClass('column-left').addClass('column-hidden'); 
$('.column-right').removeClass('column-right').addClass('column-left'); 
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden'); 

Answer 1

Играл немного с кодом. Я перегруппировал align-items от .flex-container до .column, который также является display: flex;. Для прокрутки я думаю, что у вас должен быть дополнительный абсолютно позиционированный контейнер для контента. Я использовал P.

http://codepen.io/vkjgr/pen/gpqLLZ Sample здесь

P.S. Некоторые подсказки о вашем коде. Начальное значение flex-direction - row, поэтому вам не нужно его писать. И visible не свойство display;)