Flex container doesn't expand when contents wrap in a column

Question

I have a flex-container (a <ul>) with its children set to wrap in a column. The issue I have is that once the children wrap, the background of the flex-container doesn't extend to cover these wrapped children. Here's a codepen of the issue.

Here is the code from the pen:

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>

Edit:

In my real use-case, I don't know how tall the flex-container will be or how many children it will have, so it will wrap at different points.

Answer 1

You're setting display: flex but not setting a flex value on the children. Instead of width: 3em, it should be something like flex: 1, depending on what you're trying to achieve. Using display: flex but then defining a width in em doesn't make sense.

Edit: Not sure why it was downvoted, can the downvoter clarify? The problem in the question would be resolved with proper use of positioning (e.g. use a flex value instead of setting a width).