Why does 'column-fill: auto' not update the width of it's container?

Question

We are trying to make a set of lists fit inside a horizontal scrolling container with a set width and height. We are using CSS columns to try to solve this problem. However, the property 'column-fill: auto' is displaying the list items in the correct way, but the 'ul' is not resizing to fit the change in the way it is displayed. Is there any way to fix this, or is there is another CSS solution for this?

Here is an example of the problem:

.container {
  width: 300px;
}
.panel {
  border: 1px solid red;
  white-space: nowrap;
  overflow-x: auto;
}   
.column {
  border: 1px solid blue;
  width: auto;
  display:inline-block;   
}
.list {
  column-count: auto;
  column-width: 120px;
  column-fill: auto;
  height: 150px;
  width: auto;
}
.list-item {
  float: left;
}

.cf {
  &:before, &:after {
    content: '';
    display: table;
    width: 100%;
  }
}

<div class="container">
  <div class="panel cf">
    <div class="column cf">
      <ul class="list">
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
      </ul>
    </div>
    <div class="column cf">
      <ul class="list">
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
      </ul>
    </div>
  </div>
</div>