CODEWITHSUNDEEP
htmlcss
Passerby
Passerby

Reputation: 10070

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

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

screenshot of three browsers

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:

screenshot #2

Update #3:

Thanks to @SergiyT., this turns out to be how Chrome and Firefox handles scrollbar, not the shortest child:

JSFiddle

screenshot #3

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.

Upvotes: 0

Views: 2116

Answers (3)

Sergiy T.
Sergiy T.

Reputation: 1453

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.

Upvotes: 2

Pepean
Pepean

Reputation: 51

Try

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

Upvotes: 0

Pumpkinpro
Pumpkinpro

Reputation: 847

This might help you 

div.listbox {    
    overflow-x: hidden;
}

Upvotes: 1

Related Questions