Shrinkwrap div to wrapped content
<p>I'm trying to size a container div according to its children, which can wrap onto multiple lines.  If the children (blue boxes) do wrap, the container's width is 100% (black border, below). I'd like to avoid this, and set the container to the maximum width of any of its children.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  border: 1px solid black;
  width: fit-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Can anyone help? I'm aware this can be done with javascript, but I'd prefer a css-only solution as it <em>seems</em> so simple. Thanks!</p>

<p><strong>Update:</strong>
This is a snippet showing how it should look, but it in this case it prevents the <code>.child</code> divs from appearing inline (which I want to allow when there's room):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  border: 1px solid black;
  width: min-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>