Контейнер 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