Fixed fiddle: http://jsfiddle.net/eum5bxub/4/
Basically what happens here is: (1) The text gets wrapped in an anonymous block, which is the flex item. (2) We run the flex algorithm, with 150px to divy up. We *try* to shrink that flex item, but we can't because it has (default) "min-width:auto", which prevents it from shrinking below its min-content width (the width of the longest word). (3) So, the flex item ends up at its min-content width, which is larger than the container -- it overflows. To work around this, you need to: - Create an explicit flex item (just an extra layer of <div) which you can directly style, instead of using an anonymous flex item for the text. - style that flex item with "min-width:0" to allow it to shrink below its min-content size. This doesn't affect Chrome, Safari, & Opera because they haven't implemented "min-width:auto", which means they don't stop the flex item from shrinking in step (2) above. Once they do implement it (& catch up with the spec), you'll see the same behavior from them too. Blink bug for that: https://code.google.com/p/chromium/issues/detail?id=426898 (There's probably a webkit version of that bug too but I don't have it handy right now.) ~Daniel On 02/08/2015 02:08 AM, Amit Zur wrote: > Hi, > > See this fiddle: > http://jsfiddle.net/eum5bxub/3/ > > In firefox (version 35) the first box doesn't have wrapped text, but it > should. > Chrome, Safari & Opera get it right. > I'm on Mac OS X 10.10 > > > Did I do anything wrong? Can you verify if this is a bug? > > Thanks, > Amit > _______________________________________________ > dev-platform mailing list > dev-platform@lists.mozilla.org > https://lists.mozilla.org/listinfo/dev-platform > _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
