content overflow in display:inline-block; why and how? - html

Question

Having this setup:
<div>
<label>...</label><br />
<!-- repeat several times -->
</div>
div {
display:inline-block;
overflow:auto;
max-height:3em; /* short enough to cause overflow */
/* or, in Chrome, this works too: */
padding:1ex;
}
will cause Chrome and Firefox to produce horizontal scrollbar:
JSFiddle
That Opera is Opera Presto, not Opera Blink. Too bad it's abandoned.
Anyway, why would this happen, and how would I get rid of the horizontal scrollbar if I need both max-height (thus auto overflow) and padding?
P.S. I'm using an XP machine (company restriction), if that matters.
P.S.#2 Further testing shows that disabling margin on <label>s puts out the horizontal scrollbar in Firefox, but the content will be crudely cut down to 3 characters length (the shortest label)cut down about 2 characters (the width of scrollbar).
Update #2:
In case people feel ambiguous:
Why would the container <div> shrink to the shortest length of its child (in this case, 3 chars) expand no more than the width of content in Chrome and Firefox, excluding scrollbar, letting long childs overflow?
There's no length info anywhere, so what's the logic here? I purposely added "Zero" so the first child is not the shortest one, but still got the same result.
Opera Presto seems to work as I expected, but that does not seem to be the de facto standard.
And how could I ask <div> to expand to as wide as it should, while still keeping a max-height and auto scroll?
Update #1:
The direct cause of scrollbar is of course content horizontally overflowed, so if I brutally apply overflow-x:hidden to <div>, the result will simply be this:
Update #3:
Thanks to #SergiyT., this turns out to be how Chrome and Firefox handles scrollbar, not the shortest child:
JSFiddle
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.

Answer 1

Perhaps it is how browsers work with scrollbars. It looks like opera (and maybe IE also) consider width/height without scrollbars but Firefox and Chrome take scrollbars into account. On your screenshot div width in Opera is bigger than in Firefox and Chrome.

Answer 2

This might help you
div.listbox {
overflow-x: hidden;
}

Answer 3

Try
div.listbox{
...
vertical-align: bottom;
}