Адаптивные 2 блока разной ширины
.box{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) minmax(500px, 1fr));
}
.left{
background: blue;
}
.right{
background: red;
}<div class="container">
<div class="box">
<div class="left">
123
</div>
<div class="right">
1234
</div>
</div>
</div>Пытаюсь сделать 2 блока. Правый шире, левый уже, чтобы при уменьшении экрана блоки выстраивались друг под другом на всю ширину экрана. Получается то, что блоки имеют разную ширину, но при уменьшении не подстраиваются друг под друга, а появляется колесо прокрутки. Что я делаю не правильно?