htmlcssfirefox

What does "item was clamped to its minimum size" mean in Firefox devtools?


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

enter image description here


Solution

  • 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.org/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).