为什么'column-fill：auto'不更新它的容器宽度？

Question

我们正在尝试将一组列表放在具有设置宽度和高度的水平滚动容器内。我们正在使用CSS列来尝试解决此问题。但是，属性'column-fill：auto'正在以正确的方式显示列表项，但'ul'没有调整大小以适应显示方式的变化。有没有办法解决这个问题，还是有另一种CSS解决方案？

以下是问题的一个示例：

.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>