css网格不能正常工作在Android的chrome浏览器

它简单的css和html。但首先(蓝色)栏打破了(包装)Chrome为安卓(三星S10 S20 S21)。

“不现在说唱”对我不好。它只是破坏了布局。

如果行更少。大概4或5个，它能正常工作。

你能否确认这个问题是否只存在于搭载Chrome的三星设备上？

我做错什么了吗？

这里是这个代码的CodePen链接

https://codepen。io/arlazarov-anton/full/PojmgWY

.box {
    display: grid;
    grid-template-columns: max-content 1fr;
}
.title {
    background: blue;
}
.text {
    background: red;
}

<div class="box">
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
    <div class="title">Some Text</div>
    <div class="text">Some Text</div>
</div>