我正在尝试使用Css网格水平居中。
当网格容器小于内容时，内容溢出。
.container {
display: grid;
grid-template-columns: 1fr auto 1fr;
background: rgb(234,247,179);
width: 200px;
height: 150px;
}
.mid {
grid-column: 2;
max-width: 100%;
}
.content {
background: rgb(142,225,250);
width: 250px;
max-width: 100%;
}<p>
content div overflows if container width is less than content width
</p>
<div class="container">
<div class="mid">
<div class="content">
some content .........................
</div>
</div>
</div>
Same demo，但是容器大小可以轻松更改（使用React）
当容器的尺寸小于容器的内容时，如何使容器约束？
还有其他解决方案，但我试图了解Css网格的工作原理。