title: Fit width to content with a scrollbar
body: <p>I have a problem with the width of an HTML element as soon as a vertical scrollbar appears. Normally the content fits in the box and the box width adjusts to fit the content. It should do that automatically like it always does. But when the box children need a vertical scrollbar, that scrollbar takes away the horizontal space and the items won't fit in the box anymore. The box should extend to the width of the scrollbar but it doesn't.</p>
  <p>What am I doing wrong? Is this even possible without JavaScript?</p>
  <p>It's hard for me to explain the situation with words, so please just see the sample code below.</p>
  <p>When the box height is large enough that the scrollbar disappears, at the same width, all children will fit inside. But with the scrollbar, the content is cropped. That's the problem.</p>
  <p>Update:<br>
  The text in the div children is intentionally trimmed for the case that the box cannot grow wider than needed for the content. In that case (only then) the content of the children should be trimmed. A horizontal scrollbar must never be shown. But as long as there's enough width space, the box should simply do what it does, and grow to fit everything inside it.</p>
  <p>Update:<br>
  If it's not possible to let CSS do this, then what at least can I do with JavaScript to detect that content was cropped and by how much I need to extend the width of the element manually to fit all content? I can already determine how much space there is and move the box to the side if needed. But I still need to find out when and how much.</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
          .container
          {
              position: absolute;
              left: 50px;
              top: 50px;
              height: 100px;
              overflow: auto;
              border: solid 1px black;
          }
          .container &gt; div
          {
              overflow-x: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              padding: 4px 7px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div&gt;Item 1 with a long text&lt;/div&gt;
          &lt;div&gt;Item 2&lt;/div&gt;
          &lt;div&gt;Item 3&lt;/div&gt;
          &lt;div&gt;Item 4&lt;/div&gt;
          &lt;div&gt;Item 5&lt;/div&gt;
          &lt;div&gt;Item 6&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>