html - 「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>