Контейнер Flex не расширяется при обтекании содержимого в столбце

У меня есть гибкий контейнер (a <ul>) с его дочерними элементами, которые будут обертываться в столбце. Проблема заключается в том, что после того, как дети завернут, фон гибкого контейнера не распространяется на эти обернутые дети. Здесь codepen проблемы.

Вот код из пера:

ul {
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  height: 8em;
  /*to force wrapping*/
  background-color: #999;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  width: 3em;
  text-align: center;
}
<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>
</ul>

Ответы

Ответ 1

Вы устанавливаете display: flex, но не устанавливаете значение гибкости для детей. Вместо width: 3em он должен быть чем-то вроде flex: 1, в зависимости от того, чего вы пытаетесь достичь. Использование display: flex, но затем определение ширины в em не имеет смысла.

Изменить: Не знаете, почему он был ниспровергнут, может ли downvoter выяснить? Проблема в вопросе будет решена при правильном использовании позиционирования (например, используйте значение flex вместо установки width).