My layout has a container flex-container
and a child.
HTML:
<div class="flex-container">
<div>text</div>
</div>
The container and the child have an unknown height. And the goal is:
Scheme:
The fastest way for centering a element with flexbox is the follow:
Codepen: http://www.codepen.io/ces/pen/slicw
But, if the container's child have a greater height, the child is not shown correctly. The child appears cutted (only the top part).
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
Scheme:
Is there a way for resolve this issue?
I found the solution:
.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