Beware of min-width and min-height

[raphaelgoetter]

Hello,

You might consider adding some min-content fix on flex-items :

.fukol-grids > * {
  min-width: 0;
  min-height: 0;
}

Sources :

• https://css-tricks.com/flexbox-truncated-text/
• http://www.alsacreations.com/astuce/lire/1701-images-responsive-flexbox-bug-ratio.html (fr)

[Heydon]

Interesting! Do you have a test case?

[raphaelgoetter]

The 2 links above contain test cases.

TLDR : all replaced elements (img, input, textarea, etc.) or long words like URL can break your flex-item without this "hack".

[Mottokrosh]

I actually ran into this just last week (not with Fukol, sorry, I used a "homebrew" version :P). Thanks for the links, I'm much happier knowing why that happened!

[cweekly]

Almost 5 years old but still interesting. Looks like the min-width hack isn't necessary: https://css-tricks.com/flexbox-truncated-text/#comment-1601483