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>

Ответы

Ответ 1

Препятствие, с которым вы столкнулись, является основным недостатком гибкой схемы:

Гибкий контейнер в направлении столбца не будет расширяться вместе с его обертывающими элементами.

Эта проблема может быть проиллюстрирована путем обтекания рамки вокруг ul:

введите описание изображения здесь

Пересмотренная скрипта

Вы заметите, что контейнер сохраняет фиксированную ширину, способную разместить один столбец. Обтекание столбцов просто переполняет его. Эта проблема была зафиксирована здесь: Когда flexbox элементы переносятся в режиме столбцов, контейнер не увеличивает свою ширину

В качестве решения вы можете:

  • переключитесь на flex-direction: row, у которого нет проблем с содержимым (demo)
  • используйте что-то другое, кроме display: flex, например display: inline-block
  • Используйте Javascript/jQuery. Вот одно из возможных исправлений: fooobar.com/info/23939/...