Flex container calculating one column, when there are multiple columns

Question

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 1

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:

Revised Fiddle

You'll notice that the container keeps a fixed width, able to accommodate a single column. Wrapping columns simply overflow it. This problem has been documented here: When flexbox items wrap in column mode, container does not grow its width

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