Daniel, Thanks for the quick reply! The anonymous block is what I've missed.
Cheers, Amit On Sunday, February 8, 2015 at 5:57:29 PM UTC+2, Daniel Holbert wrote: > 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
