Firefox: break-word doesn't work inside flex items about flexbugs HOT 10 CLOSED

@mrflix, you wrote:

But why doesn't min-width: auto incorporate word-wrap: break-word;?

Because if it did, the minimum content size would be the width of a single letter, since all words could be broken at any point. min-width: auto for text content means the width of the longest word.

@jpdevries you wrote:

I'm still confused about whether or not, according to the spec, flex items should have a calculated min-width:auto if not set.

Yes, the default is auto for flex items and 0px for block elements. It's important to keep in mind that developer tools aren't always accurate.

from flexbugs.

This isn't a bug. Firefox is correctly implementing the most recent spec updates (described in Flexbug 1). In fact, if you look at your demo in Chrome Canary, you'll see it behaves the same as Firefox.

from flexbugs.

I'd say it is a bug. Firefox's flex implementation can't cope with single long words.
@wilddeer thanks for the fix!

from flexbugs.

It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.

from flexbugs.

So for every flex element that could potentially contain a word longer than the element width I'd have to set the min-width to zero?
Because in a web application thats a lot of elements.

from flexbugs.

Yes, if you think this isn't ideal, you should bring it up on the www-style mailing list.

from flexbugs.

since we're talking about min-width and Firefox it might be worth noting that setting min-width OR max-width to fill-available also yields the desired result. Codepen.

.js-flex.is-fixed {
  .flex__item {
    // any of these should work
    //min-width:0;
    //min-width:fill-available;
    max-width:fill-available;
  }
}

See also

auto
The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.
 — min-width MDN Docs

One thing I don't understand about min-width:auto is if it is the default minimum size for flex items then why does min-width default to 0px when not set for flex items? Shouldn't it calculate to auto? The firefox inspector says there is a calculated min-width of 0px yet if we set the min-width to 0 or 0px we get different results...

Computed min-width value of a non flex item

Computed min-width value of a flex item

from flexbugs.

Good point @jpdevries.

Chrome sometimes crushes flex content instead of allowing overflow: scroll. I suppose a default min-width: auto on flex elements fixes that. But why doesn't min-width: auto incorporate word-wrap: break-word;?

from flexbugs.

@mrflix I wish i could tell you. I'm still confused about whether or not, according to the spec, flex items should have a calculated min-width:auto if not set. Maybe by 'default minimum size' they mean flex-basis:auto which would make more sense.

It sounds like for your use case you'll need to specify a min-width other than auto to keep your flex item from growing infinitely.

IMO It's pretty confusing that saying "always be at least 0 in width" means "don't grow horizontally forever" which is why i think max-width:fill-available is more legible.

from flexbugs.

@philipwalton thank you for the clarification! if i get around to it, i'll work on reporting the issue with developer tools to applicable vendors

from flexbugs.