Issue when centering vertically with flexbox when heights are unknown
CssFlexboxHeightOverflowCss Problem Overview
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:
- If the child has a lower height than the container, it appears centered horizontally and vertically.
- If the child has a greater height than the container, it adjusts to the top and the bottom and we can do scroll.
Scheme:
The fastest way for centering a element with flexbox is the follow:
.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
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?
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
Don't use justify-content: center
or align-items: center
. To achieve center alignment, just put empty elements on either side and set the empty elements to flex: 1
, so that they push the center element to the center.
Solution 3 - Css
Add align-self:flex-start;
to .flex-container > div
can resolve this problem too.