Problema ao centralizar verticalmente com o flexbox quando as alturas são desconhecidas
Meu layout tem um contêinerflex-container
e uma criança
HTML:
<div class="flex-container">
<div>text</div>
</div>
O contêiner e a criança têm umaltura desconhecida. E o objetivo é:
Se a criança tiver uma altura mais baixa que o contêiner, ela aparecerá centrada na horizontal e na vertical.Se a criança tem uma altura maior que o contêiner, ela se ajusta ao topo e ao fundo e podemos fazer rolagem.Esquema:
A maneira mais rápida de centralizar um elemento com o flexbox é a seguinte:
.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
Mas, se o filho do contêiner tiver uma altura maior, o filho não será mostrado corretamente. A criança aparece cortada (apenas a 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:
Existe uma maneira de resolver esse problema?