Does anybody know what that means? That because item has flex-shrink
it could be shrunk, but it couldn't shrink it below min-width:auto
?
Is there Firefox documentation maybe about this debugging panel? It looks like it shows the layout steps:
Yes, your interpretation is correct.
Is there Firefox documentation maybe about this debugging panel?
Here is the relevant documentation page from the Firefox Source Docs:
If you click on the item, the display shifts to show details about that element:
This view shows information about the calculations for the size of the selected flex item:
- A diagram visualizing the sizing of the flex item
- Content Size - the size of the component without any restraints imposed on it by its parent
- Flexibility - how much a flex item grew or shrunk based on its flex-grow value when there is extra free space or its flex-shrink value when there is not enough space
- Minimum Size (only appears when an item is clamped to its minimum size) - the minimum content size of a flex item when there is no more free space in the flex container
- Final Size - the size of the flex item after all sizing constraints imposed on it have been applied (based on the values of flex-grow, flex-shrink and flex-basis)
(emphasis mine).