title: content overflow in display:inline-block; why and how?
body: <p>Having this setup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;label&gt;...&lt;/label&gt;&lt;br /&gt;
      &lt;!-- repeat several times --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>div {
      display:inline-block;
      overflow:auto;
  
      max-height:3em; /* short enough to cause overflow */
      /* or, in Chrome, this works too: */
      padding:1ex;
  }
  </code></pre>
  
  <p>will cause Chrome and Firefox to produce <strong>horizontal</strong> scrollbar:</p>
  
  <p><a href="http://jsfiddle.net/SJCU5/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/2P8OK.png" alt="screenshot of three browsers"></p>
  
  <p>That Opera is Opera Presto, not Opera Blink. Too bad it's abandoned.</p>
  
  <p>Anyway, why would this happen, and how would I get rid of the horizontal scrollbar if I need  both <code>max-height</code> (thus auto overflow) and <code>padding</code>?</p>
  
  <p>P.S. I'm using an XP machine (company restriction), if that matters.</p>
  
  <p>P.S.#2 Further testing shows that disabling <code>margin</code> on <code>&lt;label&gt;</code>s puts out the horizontal scrollbar in Firefox, but the content will be crudely <del>cut down to 3 characters length (the shortest label)</del>cut down about 2 characters (the width of scrollbar).</p>
  
  <hr>
  
  <p><strong>Update #2:</strong></p>
  
  <p>In case people feel ambiguous:</p>
  
  <p>Why would the container <code>&lt;div&gt;</code> <del>shrink to the shortest length of its child (in this case, 3 chars)</del> expand no more than the width of content in Chrome and Firefox, excluding scrollbar, letting long childs overflow?<br>
  There's no length info anywhere, so what's the logic here?<del> I purposely added "Zero" so the first child is not the shortest one, but still got the same result.</del></p>
  
  <p>Opera Presto seems to work as I expected, but that does not seem to be the <em>de facto</em> standard.</p>
  
  <p>And how could I ask <code>&lt;div&gt;</code> to expand to as wide as it should, while still keeping a max-height and auto scroll?</p>
  
  <hr>
  
  <p><strong>Update #1:</strong></p>
  
  <p>The direct cause of scrollbar is of course content horizontally overflowed, so if I brutally apply <code>overflow-x:hidden</code> to <code>&lt;div&gt;</code>, the result will simply be this:</p>
  
  <p><img src="https://i.stack.imgur.com/zSToz.png" alt="screenshot #2"></p>
  
  <hr>
  
  <p><strong>Update #3:</strong></p>
  
  <p>Thanks to @SergiyT., this turns out to be how Chrome and Firefox handles scrollbar, not the shortest child:</p>
  
  <p><a href="http://jsfiddle.net/SJCU5/3/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/eyBiI.png" alt="screenshot #3"></p>
  
  <p>I'm not sure if this is "right" (content has been overflow-ed before the longest child appear), but this seems like a dead end.</p>