[css-flexbox-1][css-grid-1] Note to explain flex values < 1

[fantasai]

Add a note explaining flex values < 1. See https://logs.csswg.org/irc.w3.org/css/2018-04-26/#e1010206

[jonjohnjohnson]

I remember discovering this a few years ago when differences appeared alongside flex-wrap: wrap

https://jsfiddle.net/t2ewf2ac/

[simevidas]

Assuming that the flex total is less than 1, then something like flex: 0.15 seems to be equivalent to this:

{
  min-width: fit-content;
  width: 15%;
}

Demo: https://codepen.io/simevidas/pen/erGXRZ?editors=1100

Is that correct? If yes, is there a reason to use one over the other (are there any notable side effects)?

[tabatkins]

If that's the only item in the flexbox, then yeah, it's roughly equivalent. But in general it's not - the flex: 0.15 element only takes 15% of the free space, which might be reduced by other flex items, while a width: 15% element takes 15% of the available space inside the flexbox, regardless of what other flex items there might be. The flex one also reduces its size when there are more flexible elements such that the sum of the flexes is >1; the width one doesn't care.