Overflowing inline elements wrap with nested inline-table or inline-block




6 years ago
6 years ago


(Reporter: contact, Unassigned)


22 Branch

Firefox Tracking Flags

(Not tracked)




(2 attachments, 1 obsolete attachment)



6 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1588.0 Safari/537.36

Steps to reproduce:

Here is a test case: http://codepen.io/benfrain/pen/anDmL

Actual results:

The internal items wrap under one another.

Expected results:

The items should be laid out one after the other in a scrollable area (this is how it appears in WebKit/Blink - check that example out in each browser to see the difference).

Comment 1

6 years ago
I see that with FF23 on Win 7: http://i.imgur.com/w8oMlo2.jpg
Is it normal?

Could you attach a screenshot of what you see with FF23 on Mac OSX and with a different browser, please.
Flags: needinfo?(contact)

Comment 2

6 years ago
You're image shows what I believe to be correct layout (and how it renders in Chrome and Safari for instance). I have attached how this displays on Firefox 22 OS X as a screen grab.
Flags: needinfo?(contact)

Comment 3

6 years ago
Posted image Firefox 22 OS X (obsolete) —

Comment 4

6 years ago
Also now checked this on v23 of Firefox on OS X and it is the same as the screen grab I have provided (e.g. broken)

Comment 5

6 years ago
.tiff is not really user friendly, better to attach pics as jpeg or png. ;)

Comment 6

6 years ago
I think we have the same rendering on Win 7 and OSX, in fact.
If I resize the browser window, I get the same rendering as you.
Attachment #786890 - Attachment is obsolete: true


6 years ago
Component: Untriaged → Layout: Block and Inline
Product: Firefox → Core
You have a <div class="inner-window"> that's a table.  It has a bunch of inline kids with spaces between them, and each of those has an inline-table child.

So all the kids get wrapped in a single cell.  Now you have a table cell with a bunch of space-separated inlines in it.  Why wouldn't a browser wrap those at the spaces to prevent overflow?

The inlines themselves are styled "white-space: nowrap", but that shouldn't affect whether wrapping can happen _between_ them, per spec.  

Now WebKit is very buggy in this situation: it disappears the spaces for some reason, which is totally bogus per spec.  You can see it in this simple testcase in WebKit:

  data:text/html,<div style="display:table"><span>a</span>%20<span>b</span></div>

I just tested Opera, and it handles my small testcase correctly (leaves the space) and has the same rendering as us on the original testcase, as expected.

If you don't want wrapping between the inlines, you need to either remove the linebreak opportunities or set their parent to nowrap.
Last Resolved: 6 years ago
Resolution: --- → INVALID

Comment 9

6 years ago
OK, thanks for that and the explanation makes sense.
You need to log in before you can comment on or make changes to this bug.