Flex-контейнер, вычисляющий один столбец, когда имеется несколько столбцов

У меня есть li из 15 элементов, отображаемых как flex-direction: column (он применяется к родительскому объекту (ul)). Затем у меня есть div обертка ul с свойством justify-content: center.

Проблема в том, что div вычисляет ul, как если бы он был только одним столбцом, хотя у меня несколько столбцов. Таким образом, ширина будет ul 200px, когда она должна быть 800px. Поэтому, когда я добавляю свойство justify-content: center (или flex-end) в div, он центрирует ul, как будто он только 200px, поэтому он не центрируется должным образом.

Как я могу это исправить?

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>