Issue when centering vertically with flexbox when heights are unknown

Question

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: enter image description here

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:

enter image description here

Is there a way for resolve this issue?

cespon · Accepted Answer · 2020-07-10T13:53:59.883

139

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

edited Jul 10 '20 at 13:53

answered Jul 03 '14 at 02:11

cespon

5,630
7
33
47

11

I wish I could upvote this more than once - it's not only useful it's also very well communicated, thanks. – Aug 13 '14 at 17:06
Here `.flex-container` has the initial value `align-items: flex-start` (i.e. top). – sam Jun 25 '15 at 18:49
1

Been trying to find answer to this for a longgg time now! thank you. – ct5845 Oct 01 '15 at 08:46
Nice solution but is there a why? – jiyinyiyong Oct 28 '15 at 15:01
3

@jiyinyiyong - here are some details on the "why?" ... http://stackoverflow.com/a/33455342/3597276 – Michael Benjamin Dec 05 '15 at 11:30
Nice! But are there any IE11 fixes that you can put in? – Rhys May 12 '16 at 08:07
Thank you very much! you saved me HOURS of research and frustration. – Gaston Sanchez Nov 05 '16 at 07:08
It doesn't work horizontally. But if you use a min-width instead of width on the child. it works like a charm. – João Mosmann Nov 21 '16 at 11:27
Unfortunately setting margin to auto still doesn't fix the problem if `flex-wrap: wrap;` and the flex item is `flex: 1 100%;`. In this situation, the margin of the flex item remains 0! How can we fix the problem here? – Ali Dec 16 '16 at 00:45
3 years later and you save my day. Thanks! – Elmer Dantas Nov 17 '17 at 12:00

score 0 · Answer 2 · answered Dec 31 '21 at 14:59

0

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.

answered Dec 31 '21 at 14:59

Kernel James

3,752
25
32

score -1 · Answer 3 · answered Oct 28 '15 at 15:43

-1

Add align-self:flex-start; to .flex-container > div can resolve this problem too.

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

answered Oct 28 '15 at 15:43

iwege

6,350
1
15
5

1

This answers the question instead of providing a workaround like the accepted answer does. +1 – RienNeVaPlu͢s Apr 04 '16 at 01:57
8

Your solution is simply to ignore the centering requirement. Of course, if centering wasn't necessary, there wouldn't be a problem.. – Michael Benjamin May 26 '16 at 19:42
3

This is not the correct answer because it ignores the vertical centering. So it is not a solution. – ranzwertig Feb 15 '17 at 14:56

Issue when centering vertically with flexbox when heights are unknown

3 Answers3

Linked

Related