Как сделать контейнер flexbox для прокрутки?

Question

У меня есть вертикальный контейнер flexbox, на котором я устанавливаю определенную высоту и устанавливаю его для прокрутки по вертикали при переполнении. Проблема в том, что контейнер flex не будет прокручиваться, если его содержимое переполняется. Вот плункер, который демонстрирует, о чем я говорю: http://plnkr.co/edit/3t4cuxMSGuNr88u0Whdl?p=preview.

.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow-y: scroll; 
 
    height: 600px; 
 
    width: 400px; 
 
} 
 
.block-container { 
 
    overflow-y: scroll; 
 
    height: 600px; 
 
    width: 400px; 
 
    margin-left: 50px; 
 
} 
 
.item1 { 
 
    height: 200px; 
 
    background-color: red; 
 
    margin-bottom: 1px; 
 
} 
 
.item2 { 
 
    height: 200px; 
 
    background-color: green; 
 
    margin-bottom: 1px; 
 
} 
 
.item3 { 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin-bottom: 1px; 
 
}

<div style="display: flex"> 
 
    <div class="flex-container"> 
 
    <p>Flex Container</p> 
 
    <div class="item1">Text</div> 
 
    <div class="item2">Text</div> 
 
    <div class="item3">Text</div> 
 
    <div class="item1">Text</div> 
 
    <div class="item2">Text</div> 
 
    <div class="item3">Text</div> 
 
    <div class="item1">Text</div> 
 
    <div class="item2">Text</div> 
 
    <div class="item3">Text</div> 
 
    </div> 
 
    <div class="block-container"> 
 
    <p>Block Container</p> 
 
    <div class="item1">Text</div> 
 
    <div class="item2">Text</div> 
 
    <div class="item3">Text</div> 
 
    <div class="item1">Text</div> 
 
    <div class="item2">Text</div> 
 
    <div class="item3">Text</div> 
 
    <div class="item1">Text</div> 
 
    <div class="item2">Text</div> 
 
    <div class="item3">Text</div> 
 
    </div> 
 
</div>

Как вы можете видеть, у меня есть два одинаковых коробки - первый является гибкой коробкой (display: flex), а другой представляет собой блок-бокс (display: block). Я установил высоту для них обоих, но flexbox сжимает его элементы, чтобы соответствовать его содержимому внутри границ высоты, в то время как блок-блок будет просто прокручиваться. Как я могу заставить flexbox не сжимать свои элементы и вести себя как блок-бокс в этом смысле?

Спасибо.

Answer 1

Try, установите значение flex-basis, и сделать его не расти или сокращаться:

.item1, .item2, .item3 { 
    flex: 0 0 200px; 
} 

Или flex: 1 0 200px;, если вам нужно, чтобы они росли по мере необходимости.

jsFiddle

Answer 2

Вы всегда можете предоставить min-height и гнуться будут уважать. См. Обновленный Plunkr

http://plnkr.co/edit/7rgo7BpWWtXsQqYbJvdU?p=preview