How to create a div box with dynamic width based on text content? : <p>I want to create a simple <code>div</code> that shrinks and expands according to the content contained.</p>

<p><a href="https://jsfiddle.net/qa5dr0x8/" rel="noreferrer">https://jsfiddle.net/qa5dr0x8/</a></p>

<pre><code>&lt;body&gt;
  &lt;div style="border: 1px solid red; padding: 15px; width:auto;"&gt;
    test text
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Result: the red box expands to the full width of the page. Why?</p>
