Jessica Jessica - 2 years ago 87
HTML Question

Flex container calculating one column, when there are multiple columns

I have an

of 15 items displaying as
flex-direction: column
(it's applied to the parent (
)). I then have a
wrapping the
with the property of
justify-content: center

The problem is, the
calculates the
as if it's only one column, even though I have multiple columns. So the width of the is
when it should be
. Therefore, when I add the property of
justify-content: center
) to the
, it centers the
as if it's only
, so it doesn't center properly.

How can I fix it?


div {
background-color: aqua;
height: 700px;
display: flex;
justify-content: center;
ul {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
li {
outline: 1px solid;
background-color: greenYellow;
list-style-type: none;
width: 200px;
height: 150px;


Answer Source

The obstacle you have encountered is a fundamental deficiency in flex layout:

A flex container in column-direction will not expand along with its wrapping items.

This problem can be illustrated by wrapping a border around the ul:

enter image description here

Revised Fiddle

You'll notice that the container keeps a fixed width, able to accommodate a single column. Wrapping columns simply overflow it.

Without the ul container expanding to accommodate additional columns, which would in turn expand the parent div, there's no reason to think the extra columns themselves (the li items) would expand the grandparent.

As a solution you can:

  • switch to flex-direction: row, which has no problem containing wrapping items (demo)
  • use something other than display: flex, such as display: inline-block
  • Use Javascript/jQuery. Here's one possible fix:

More information:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download