Absolutely positioned flexbox doesn't expand to fit contents [duplicate]

Question

As you can see from the Snippet below (View as Fiddle), an absolutely positioned, columnar flexbox won't expand to fit its children.

In Chrome, for example, it will only be as wide as the widest child element and as tall as the shortest column.

Can anyone suggest a solution without using any additional markup?

Edit: The number of items in the list will be dynamic, as will the text in each item. I need to break to a new column after a set number of items.

*{box-sizing:border-box;}  ul{      background:#090;      display:flex;      flex-flow:column wrap;      left:0;      list-style:none;      max-height:202px;      padding:5px;      position:absolute;      top:0;  }  li{      background:rgba(255,0,0,.75);      color:#fff;      flex:1 0 30px;      font-family:arial;      line-height:30px;      max-height:30px;      margin:1px;      padding:0 2px;      min-width:100px;  }

<ul>      <li>Line 0</li>      <li>Line 1</li>      <li>Line 2</li>      <li>Line 3</li>      <li>Line 4</li>      <li>Line 5</li>      <li>Line 6</li>      <li>Line 7</li>      <li>Line 8 is a little bit longer</li>  </ul>