821272 - width:100% doesn't work right when parent has display:-moz-box

Status: UNCONFIRMED

(Core :: XUL, defect)

Description

[Balázs Suhajda]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0
Build ID: 20121128204232

Steps to reproduce:

Created an element with a long word and set the style word-wrap: break-word with a parent element using display: -moz-box while the width is less than would fit the word.

http://jsbin.com/awobec/1/edit


Actual results:

Word remained in a single line reaching outside the containing element.


Expected results:

Word should have been broken into several lines.

Comment 1

[Boris Zbarsky [:bzbarsky]]

This isn't a block display problem.  If you set a background on .text you'll see that it's just ignoring the width style when inside a -moz-box, because XUL layout is weird like that.

I don't think we have any plans to change XUL layout here.  Don't use -moz-box!

Comment 2

[Boris Zbarsky [:bzbarsky]]

And this has nothing to do with word-wrap either, by the way.  There's just no line-breaking here, even if you put spaces in the text.

Comment 3

[Balázs Suhajda]

(In reply to Boris Zbarsky (:bz) from comment #1)
> This isn't a block display problem.  If you set a background on .text you'll
> see that it's just ignoring the width style when inside a -moz-box, because
> XUL layout is weird like that.
> 
> I don't think we have any plans to change XUL layout here.  Don't use
> -moz-box!

Ok, I've probably removed to many css rules to prove my point. 
Btw: I do need flex-box, but I've obviously removed the rest of the page to point out the problem.

<a class="jsbin-embed" href="http://jsbin.com/awobec/4/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

By adding word-break: break-all, the long word is actually broken up as I would expect.

Comment 4

[Balázs Suhajda]

Embed didn't work, but here is the link: http://jsbin.com/awobec/4/edit
You can clearly see that without word-break: break-all, the .text box expands to fit the text even though it should break it.

Comment 5

[Balázs Suhajda]

(In reply to Boris Zbarsky (:bz) from comment #2)
> And this has nothing to do with word-wrap either, by the way.  There's just
> no line-breaking here, even if you put spaces in the text.

And there is also the fact that in all ( even IE9 ) other browsers it behaves as expected, breaking the long word to fit into the width of the box!

Comment 6

[Balázs Suhajda]

Sorry, IE10 of course. 9 has no flex-box... Silly me.

Comment 7

[Boris Zbarsky [:bzbarsky]]

> Btw: I do need flex-box,

-moz-box isn't flexbox.  It's a XUL box, which has completely different layout rules.

Flexbox is "display: flexbox".

Comment 8

[Scott Johnson (:jwir3)]

(In reply to Boris Zbarsky (:bz) from comment #7)
> > Btw: I do need flex-box,
> 
> -moz-box isn't flexbox.  It's a XUL box, which has completely different
> layout rules.
> 
> Flexbox is "display: flexbox".

display: flex, now, I think.