Grow parent to width of the child [duplicate] - html

Question

This question already has answers here:
Why does the outer <div> here not completely surround the inner <div>?
(2 answers)
Closed 2 years ago.
I have a child element inside of a parent element. The child has a min-width set, which makes it (at some screen sizes) wider than the parent element. The child's width correctly is set to the min-width, but the parent's width seems to max out at the original screen width. I would like the parent to grow with the child. How can I achieve this?
.container {
display: block;
background-color: blue;
width: auto;
}
.grid {
min-width: 1000px;
display: grid;
padding: 10px;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
margin-left: auto;
margin-right: auto;
align-items: start;
}
.grid > div {
background-color: yellow;
}
<div class="container">
<div class="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
</div>
In the example, 'container' (blue background) is narrower than the child 'grid' (the grid of yellow boxes). If you scroll right, you can see that the blue background stops at the edge of the screen, while the yellow grid continues. I would like the blue area to grow to contain the child grid.
I have tried setting width and min-width properties on the container to auto and/or 100%. I've also tried changing the display to inner-block. None of these work.

Answer 1

Using width: fit-content on the .container element would allow it to expand outside of the window bounds when necessary.
.container {
display: block;
background-color: blue;
width: fit-content;
}
.grid {
min-width: 1000px;
display: grid;
padding: 10px;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
margin-left: auto;
margin-right: auto;
align-items: start;
}
.grid > div {
background-color: yellow;
}
<div class="container">
<div class="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
</div>