Определение направления переполнения вертикально выровненного элемента flexbox

Question

У меня есть flexbox с одним элементом. Этот элемент расположен по горизонтали и по вертикали. Когда предмет растет выше его контейнера, он переливается одинаково вверху и дну контейнера. Я бы хотел, чтобы он только переполнялся внизу и оставался на вершине вверх. Есть идеи?

http://codepen.io/wilsonpage/pen/LzryK (вид в Chrome Canary для последнего Flexbox)

Answer 1

Под стандартного проектом Flexbox, один гибкий элемент может быть вертикально и горизонтально по центру используя margin: auto. Вы хотите использовать это вместо свойства ALIGN-пунктов:

http://codepen.io/cimmanon/pen/EJdvn

section { 
    display: flex; 
    justify-content: center; /* you can remove this here, but its not hurting anything */ 
    /* remove align-items */ 

    height: 80%; 
    margin: 5% 0; 
    background: green; 
} 

div { 
    margin: auto; /* add */ 
} 

Answer 2

Попробуйте установить следующее на гибком пункте:

align-self: flex-start;