I am facing an issue with the grid element inside a parent container with display: grid;. The parent container has a maximum size and allows scrolling for the grid if necessary.
The problem is that the grid element does not expand to fit its children. When scrolling horizontally, you can notice that the background color of .grid (red) ends while the background color of .b (blue) continues. I feel like there might be a property that I am unaware of.
.wrapper {
max-width: 200px;
overflow: auto;
}
.grid {
max-width: none;
display: grid;
grid-template-columns: 150px 150px;
background: red;
border-bottom: 3px solid red;
}
.a {
background: rgba(0, 255, 0, 0.5);
border-bottom: 3px solid green;
}
.b {
background: rgba(0, 0, 255, 0.5);
border-bottom: 3px solid blue;
}<div class="wrapper">
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
</div>
</div>