Flexbox (display:box) ignores overflow:hidden and expands flexbox child when content is larger than child’s width

NEW
Unassigned

Status

()

Core
Layout
6 years ago
2 years ago

People

(Reporter: Oli Studholme, Unassigned)

Tracking

Trunk
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b8) Gecko/20100101 Firefox/4.0b8
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b8) Gecko/20100101 Firefox/4.0b8

Firefox also doesn’t respect overflow:hidden on box element children with content larger than the child’s declared width, such as pre content or a very long word

See 2nd example in http://oli.jp/bugs/mozilla/flexbox-overflow.html (“Widths of children smaller than content”)

Reproducible: Always

Actual Results:  
The first child box expands to display (almost) all of the unwrappable content. This also occurs for overflow values auto and scroll

Expected Results:  
The first child box should be the declared width, and overflow:hidden should clip the extra content.
Component: General → Layout
OS: Mac OS X → All
QA Contact: general → layout
Version: unspecified → Trunk
Summary: Flexbox ignores overflow:hidden and expands child when content is larger than child’s width → Flexbox ignores overflow:hidden and expands flexbox child when content is larger than child’s width

Comment 1

6 years ago
Created attachment 536277 [details]
more simple testcase

Added a more simple testcase. The width is also expanded when overflow is set to scroll.
Also: Component should be "Layout: Block and Inline".

Updated

6 years ago
Attachment #536277 - Attachment mime type: text/plain → text/html

Comment 2

6 years ago
I can confirm this bug, still exists (Firefox 5.0)

Comment 3

5 years ago
I can confirm this bug still exists (Firefox 12.0). It also incorrectly handles the height as well.

Comment 4

5 years ago
I can reproduce this on Firefox 16.0.2.
(Reporter)

Updated

5 years ago
Summary: Flexbox ignores overflow:hidden and expands flexbox child when content is larger than child’s width → Flexbox (display:box) ignores overflow:hidden and expands flexbox child when content is larger than child’s width
(Reporter)

Comment 5

5 years ago
Just FYI this is regarding OLD Flexbox (display: box;), not NEW Flexbox (display: flex;), and the chances of it being fixed are probably not great. For more background:
https://bugzilla.mozilla.org/show_bug.cgi?id=625694

Comment 6

4 years ago
(In reply to Oli Studholme from comment #5)
> Just FYI this is regarding OLD Flexbox (display: box;), not NEW Flexbox
> (display: flex;), and the chances of it being fixed are probably not great.
> For more background:
> https://bugzilla.mozilla.org/show_bug.cgi?id=625694

This is actually still true on the Aurora and Nightly channels, where "display: flex;" is used.
(In reply to Eric Meyer from comment #6)
> This is actually still true on the Aurora and Nightly channels, where
> "display: flex;" is used.

bug 782441 actually tracks the analogous version of this issue for "display: flex".

(FWIW: up until recently, the flexbox spec actually required that "overflow:hidden" be disregarded on flex containers -- the overflow property is specified to only apply to "block containers", and the flexbox spec explicitly says that flex containers are *not* block containers.  However, the spec has been updated to have a caveat for this now, though.  See thread at http://lists.w3.org/Archives/Public/www-style/2013Jan/0465.html for more details.)

Comment 8

4 years ago
Bug 782441 is fixed and the new spec is implemented, so can we close this one?
Status: UNCONFIRMED → NEW
Ever confirmed: true
(In reply to sjw from comment #8)
> Bug 782441 is fixed and the new spec is implemented, so can we close this
> one?

The existence of the new layout model does not mean we should automatically close out all bugs in the old model.

(However, it does mean we'll likely be deprecating -moz-box and recommending that folks use display:flex instead, which may mean this ends up WONTFIX eventually.)
You need to log in before you can comment on or make changes to this bug.