Jessica Jessica - 6 months ago 15
HTML Question

Flex container calculating one column, when there are multiple columns

I have an

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

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

How can I fix it?

JSFiddle





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;
}

<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>




Answer

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: http://stackoverflow.com/a/26231447/3597276

More information: