Grid container not expanding to fit children - html

Question

I'm creating a 3-column grid.
Each cell uses clamp(Xem, 33.33%, Xem) so there is a min size for big screens as well as a max size for small screens. If the screen is too small, the idea is that the grid's container will support that by becoming horizontally scrollable.
The page itself has left and right margins of 1em. To make the experience nice, the horizontally scrollable grid container uses negative margins and equal padding on the left and right so that it feels that the entirety of the width of the screen is visible and scrollable.
See the demo below where I've simulated the grid's behaviour in different screen sizes by manipulating the min and max of the clamp. You can see in the big size and perfect size screens it works nicely. The padding on both sides is visible.
However, for small screens, when it becomes scrollable, you scroll to the right and the right side padding is not there. This seems to be because the grid div itself is not stretching to accomodate its children, and so its parent's padding isn't "reaching" the right side (yet somehow, the grid's horizontal scroll container is aware that its content stretches - not sure how that works but that's a different topic I think).
The grid div is outlined in red. You can inspect it, along with the horizontal container, and see that the right padding ends halfway through the grid horizontally rather than at the end of the grid where one would expect it to be.
.background {
background-color:#f003;
overflow: hidden;
display: flex;
justify-content: center;
}
.scrollcontainer {
background-color:#ff03;
width: 300px;
height: 400px;
padding-left: 1em;
overflow: scroll;
padding-right: 1em;
}
.scrollGrid {
margin-left: -1em;
margin-right: -1em;
padding-left: 1em;
padding-right: 1em;
width: 100%;
background-color: #00f3;
overflow-y: scroll
}
.grid {
display:grid;
width: fit-content;
min-width: 100%;
background-color: #f0f3;
outline: 1px solid red;
}
.grid.perfect {
grid-template-columns: repeat(3, clamp(2em, 33.33%, 30em));
}
.grid.small {
grid-template-columns: repeat(3, clamp(9em, 33.33%, 10em));
font-size: 1.5em;
}
.grid.big {
font-size: 0.5em;
grid-template-columns: repeat(3, clamp(2em, 33.33%, 5em));
}
.grid > div {
height: 50px;
border: 1px solid black;
padding: 1em;
}
<div class="background">
Background
<div class="scrollcontainer">
<h2>Scrollable section of stuff here</h2>
<p>simulated perfect screen</p>
<div class="scrollGrid">
<div class="grid perfect">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
</div>
</div>
<p>simulated small screen (this is where the problem is, scroll hroizontally and notice there is no padding on the right side, the grid container ends where the blue ends)</p>
<div class="scrollGrid">
<div class="grid small">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
</div>
</div>
<p>simulated big screen (works as desired)</p>
<div class="scrollGrid">
<div class="grid big">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
</div>
</div>
<p>more text to show that this is scrollable</p>
</div>
</div>
Thank you to anyone who sheds light on this.

Answer 1

Using minmax instead of clamp fixed the issue for me. Not sure why. minmax(2em, min(33.33%, 30em)). The problem also still seems to happen when using minmax(max(2em, 33.33%, 30em)), so I'm not sure why it only works for the former.
.background {
background-color:#f003;
overflow: hidden;
display: flex;
justify-content: center;
}
.scrollcontainer {
background-color:#ff03;
width: 300px;
height: 400px;
padding-left: 1em;
overflow: scroll;
padding-right: 1em;
}
.scrollGrid {
margin-left: -1em;
margin-right: -1em;
padding-left: 1em;
padding-right: 1em;
width: 100%;
background-color: #00f3;
overflow-y: scroll
}
.grid {
display:grid;
width: fit-content;
min-width: 100%;
background-color: #f0f3;
outline: 1px solid red;
}
.grid.perfect {
grid-template-columns: repeat(3, minmax(2em, min(33.33%, 30em)));
}
.grid.small {
grid-template-columns: repeat(3, minmax(9em, min(33.33%, 10em)));
font-size: 1.5em;
}
.grid.big {
font-size: 0.5em;
grid-template-columns: repeat(3, clamp(2em, 33.33%, 5em));
}
.grid > div {
height: 50px;
border: 1px solid black;
padding: 1em;
}
<div class="background">
Background
<div class="scrollcontainer">
<h2>Scrollable section of stuff here</h2>
<p>simulated perfect screen</p>
<div class="scrollGrid">
<div class="grid perfect">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
</div>
</div>
<p>simulated small screen (this is where the problem was, not scrolling to the side reveals the grid element stretched all the way to the end and the appropriate padding)</p>
<div class="scrollGrid">
<div class="grid small">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
</div>
</div>
<p>simulated big screen (works as desired)</p>
<div class="scrollGrid">
<div class="grid big">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
</div>
</div>
<p>more text to show that this is scrollable</p>
</div>
</div>