Chrome为什么不更新内联块的宽度

Question

下面是ul，它与display: inline-block一起显示，并且没有显式设置width。另外，breakpoint处有一个700px，可以将列表从单列布局更改为两列布局。

我希望在断点处，列表大小将自动更新为首选的收缩包装大小。

在Safari和Firefox中，此功能符合我的预期。随着窗口大小的增加，列表的宽度在断点处增加。

在Chrome中，它无法正常运行。随着窗口大小的增加，列表的宽度在断点处不会增加，这会导致内容重叠并延伸到列表边界之外。

我是在做错什么还是Chrome布局错误？

Safari：

Chrome：

https://jsfiddle.net/mpvosseller/ya8Lfn56/8/

body {
  background-color: gray;
}

ul {
  display: inline-block;
  background-color: lightblue;
  column-count: 2;
}

@media screen and (max-width: 700px) {
  ul {
    column-count: 1;
  }
}

<ul>
  <li>1111111111111111111111111111111111111111</li>
  <li>2222222222222222222222222222222222222222</li>
  <li>3333333333333333333333333333333333333333</li>
  <li>4444444444444444444444444444444444444444</li>
</ul>