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:

1. Start with flex-basis - width=100%
2. There's not enough space in the parent container -> check flexibility -> could be shrunk
3. What's the minimum size? Based on content its 1210px. Shrunk to the minimum.
4. Final size is...

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:

1. Start with flex-basis - width=100%
2. There's not enough space in the parent container -> check flexibility -> could be shrunk
3. What's the minimum size? Based on content its 1210px. Shrunk to the minimum.
4. Final size is...

• html
• css
• firefox

• 1 I think you're correct. It means there's min-width and min-height styles that limit how much it can shrink. It's just the plain meaning of the words. – Barmar Commented Mar 13 at 17:50

1 Answer 1

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:

https://firefox-source-docs.mozilla./devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html#flex-item-properties

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).