vertical - css flex center text

Problema al centrar verticalmente con flexbox cuando las alturas son desconocidas

Question

Mi diseño tiene un recipiente contenedor flex-container y un niño.

HTML:

<div class="flex-container">
<div>text</div>
</div>

El contenedor y el niño tienen una altura desconocida . Y el objetivo es:

• Si el niño tiene una altura más baja que el contenedor, parece centrarse horizontal y verticalmente.
• Si el niño tiene una altura mayor que el contenedor, se ajusta a la parte superior e inferior y podemos desplazarnos.

Esquema:

La forma más rápida para centrar un elemento con flexbox es la siguiente:

.flex-container
{
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
width: 100%;
height: 300px; /* for example purposes */
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}

<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://www.codepen.io/ces/pen/slicw

Pero, si el niño del contenedor tiene una altura mayor, el niño no se muestra correctamente. El niño aparece cortado (solo la parte superior).

html,body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.flex-container
{
display: flex;
align-items: center; // vertical
justify-content: center; // horizontal
width: 100%;
height: 100px;
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}

<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://www.codepen.io/ces/pen/sGtfK

Esquema:

¿Hay alguna manera de resolver este problema?

Answer 1

Añadir align-self:flex-start; a .flex-container > div puede resolver este problema.

Ver: http://www.w3.org/TR/css-flexbox-1/#auto-margins

Answer 2

Encontré la solución:

.flex-container
{
display: flex; /* only */
overflow-y: scroll;
}
.flex-container > div
{
margin: auto; /* horizontal and vertical align */
}

html,body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.flex-container
{
display: flex;
width: 100%;
height: 100px; /* change height to 300px */
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
padding: 1em 1.5em;
margin: auto;
background: #E77E23;
width: 400px;
}

<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://codepen.io/ces/pen/Idklh