Fit parent div to its childs [duplicate] - html

Question

This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 4 years ago.
I've got a question for which I didn't find any easy solution.
Using only HTML and CSS,
is there a nice way to fits the parent div to "match" the total sizes of its contained elements?
Note that the box elements all have the same fixed, mandatory sizes. But this size may vary, so I'd like to not use #media queries.
Here is a commented snippet to illustrate what I mean:
#page{
width: 500px;
}
.container {
display: inline-block;
border: 1px solid black;
background: #ddd;
height: auto;
}
.box {
width: 200px;
height: 30px;
background: #fff;
line-height: 30px;
text-align: center;
border: 1px solid gray;
float: left;
}
#con1{
width: 404px;
}
<div id="page">
<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
<br><br>
<p>Here is what I want, but without setting width in the CSS!</p>
<div class="container" id="con1">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
</div>
Doing this snippet, it appears to me I've got another little question…
Why is there some space between the boxes in my snippet?
Thanks in advance for any helpful answer.

Answer 1

Use of Media Query like this:
.container {
border: 1px solid black;
background: #ddd;
display: inline-block;
}
#media screen and (max-width: 631px) {
.container {
width: 409px;
}
}
#media screen and (max-width: 421px) {
.container {
width: 202px;
}
}
.box {
width: 200px;
height: 30px;
display: inline-block;
background: #fff;
line-height: 30px;
text-align: center;
border: 1px solid gray;
}
<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
Note: Resize browser and see result!