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

having setup:

<div>     <label>...</label><br />     <!-- repeat several times --> </div> 

div {     display:inline-block;     overflow:auto;      max-height:3em; /* short enough cause overflow */     /* or, in chrome, works too: */     padding:1ex; } 

will cause chrome , firefox produce horizontal scrollbar:

jsfiddle

that opera opera presto, not opera blink. bad it's abandoned.

anyway, why happen, , how rid of horizontal scrollbar if need both max-height (thus auto overflow) , padding?

p.s. i'm using xp machine (company restriction), if matters.

p.s.#2 further testing shows disabling margin on <label>s puts out horizontal scrollbar in firefox, content crudely cut down 3 characters length (the shortest label)cut down 2 characters (the width of scrollbar).

---

update #2:

in case people feel ambiguous:

why container <div> shrink shortest length of child (in case, 3 chars) expand no more width of content in chrome , firefox, excluding scrollbar, letting long childs overflow?
there's no length info anywhere, what's logic here? purposely added "zero" first child not shortest one, still got same result.

opera presto seems work expected, not seem de facto standard.

and how ask <div> expand wide should, while still keeping max-height , auto scroll?

---

update #1:

the direct cause of scrollbar of course content horizontally overflowed, if brutally apply overflow-x:hidden <div>, result this:

---

update #3:

thanks @sergiyt., turns out how chrome , firefox handles scrollbar, not shortest child:

jsfiddle

i'm not sure if "right" (content has been overflow-ed before longest child appear), seems dead end.

perhaps how browsers work scrollbars. looks opera (and maybe ie also) consider width/height without scrollbars firefox , chrome take scrollbars account. on screenshot div width in opera bigger in firefox , chrome.