Fill Container vs Hug Contents in Figma: Why Is One Missing?

• Fixed: the layer keeps the width or height you type. Works everywhere.
• Hug contents: an auto layout frame shrinks or grows to wrap its children plus padding. Only auto layout frames have it.
• Fill container: a child stretches to take the space its auto layout parent has left. Only children of auto layout frames have it.

Width and height are set separately, so a button can hug its label horizontally and have a fixed height, and a card can fill the row's width while hugging its content vertically.

Take a button: a Horizontal auto layout frame with an icon and a label. Set the button to Hug contents on both axes and it grows as you type a longer label. Now put that button in a Vertical form frame with a fixed width of 360px. Switch the button's width to Fill container and it stretches to the form's width minus padding, while its height still hugs.

1. The parent has no auto layout. This is the answer in the Figma forum thread on Fill being greyed out. Select the parent and press Shift+A, and Fill container appears on its children.
2. The layer is a top-level frame. A frame sitting directly on the canvas has no container to fill, so the option never shows. Put it inside an auto layout frame first.
3. The layer is in a group, not a frame. Groups don't have auto layout, so their children can't fill. Frame the selection with ⌥⌘G / Ctrl+Alt+G and add auto layout.

Hug has two common blockers. First, the frame needs auto layout. A plain frame has a fixed size and doesn't know about its children, so add auto layout with Shift+A. Second, a parent can't hug a child that fills it. If a child is set to Fill container, the child waits for the parent's size and the parent waits for the child's, so Figma won't let the parent hug. Set the child to Fixed or Hug, and the parent can hug again.

Also check the padding. A frame can't be smaller than its own padding, so a hugging frame with 40px of padding on each side is never narrower than 80px, even when empty.

There is no "none" option. You swap one mode for another in the Width or Height dropdown in the right sidebar. To stop a frame hugging, pick Fixed and type a size. To get rid of a fixed width on a child, pick Fill container (if the parent has auto layout) or Hug contents (if the layer has auto layout itself). Figma's help center doesn't list a keyboard shortcut for switching sizing modes, so use the dropdown.

Min and max limits live in the same dropdowns. Open Width and choose Add min width or Add max width; open Height for Add min height or Add max height. They work on auto layout frames and on their children. When a limit is set, the width or height icon shows two extra lines so you can spot it.

Limits are how you make Fill container behave in real layouts: a sidebar that fills but never drops below 240px, or a text column that stops growing past a readable width. A min width is also the fix when auto layout wrap isn't working, because a Fill child without one never wraps.

For the full auto layout setup, including gap and padding, read how to use auto layout in Figma. For overlapping children, see absolute position.