Ниже приведено ul, которое отображается с display: inline-block и не имеет явного набора width. Кроме того, есть breakpoint в 700px, чтобы изменить список с макета с одним столбцом на макет с двумя столбцами.
Я ожидал, что в точке останова размер списка автоматически обновится до желаемоготермоусадочный размер.
В Safari и Firefox это работает, как я и ожидал. По мере увеличения размера окна ширина списка увеличивается в точке останова.
В Chrome он работает не так, как я ожидал. При увеличении размера окна ширина списка не увеличивается в точке останова, что приводит к тому, что содержимое перекрывается и выходит за границы списка.
Я что-то не так делаю или это ошибка компоновки Chrome?
Safari: 
Хром: 
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>