Overflow scroll and nowrap unwanted scrollbar
<p>I have a drop down menu which I'd like to have the text content control the width of. Sometimes this menu will have a <code>max-height</code> with a scroll-bar.</p>

<p>If you run the snippet below you'll see the last word of the longest piece of text will wrap due to the presence of the scroll-bar. Using <code>white-space: nowrap;</code> will cause the text to go underneath the y-scroll-bar an make an x-scroll-bar to appear.</p>

<p>What's the best way to make this work? There's plenty I could do with JS (detect width of the text and apply a width to the container etc) but looking for CSS only solutions.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.drop-menu {
  postion: relative;
}

ul, il {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}

.drop-items li {
  border-bottom: 1px solid #ccc;
  /* white-space: nowrap; */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="drop-menu"&gt;
  &lt;span&gt;Menu&lt;/span&gt;
  &lt;div class="drop-items"&gt;
    &lt;ul&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item item item item item item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>