Closed Bug 902400 Opened 9 years ago Closed 9 years ago

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


(Core :: Layout: Block and Inline, defect)

22 Branch
Not set





(Reporter: contact, Unassigned)





(2 files, 1 obsolete file)

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:

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).
I see that with FF23 on Win 7:
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)
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)
Attached image Firefox 22 OS X (obsolete) —
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)
.tiff is not really user friendly, better to attach pics as jpeg or png. ;)
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
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.
Closed: 9 years ago
Resolution: --- → INVALID
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.