Skip to main content
Bethany_McBride_174
New Member
November 12, 2024

Hug until container is too small

  • November 12, 2024
  • 17 replies
  • 710 views

I would like an option to hug content until the container it is in is too small. For instance, I am making a tab bar where the tabs are set to fill so they adjust with screen sizes. The title on each has an info icon to the right. The text has to be set to hug for the icon to stay right next to the text. However, that means if the text is long, when the tabs shrink the text extends out rather than wrapping.

I would like the option to set the hugged text to wrap when it extends past the parent container without having to manually change it a each breakpoint.

17 replies

Narelle
New Participant
January 27, 2026

Stevie3, that example only supports the wrapping, not the hug required when only one line of text

Narelle
New Participant
January 27, 2026

Francesco, it appears to be a current limitation of Figma, as the container can either be fill or hug only. You can use the max-width to force a wrap on a container that hugs until it reaches that max-width, however the max-width is a fixed value so it can not be set to follow the parent container size.

There is this post that is related to this same topic 

 

Alina Peycheva
New Member
February 24, 2026

This functionality is essential!
The text should hug when short, and fill the parent container when it exceeds its width.

Figma add something like 
max-width: 100%;

HappyDance
New Member
April 22, 2026

As a developer trying to provide responsive components for the design team, I’m completely shocked that this isn’t supported.

 

This should be as simple as text defaulting to wrap… just like standard browser behavior. When the parent is smaller than the length of the text, the text wraps. That’s it. Done. Add a property to disable wrapping when you don’t want it.

 

Unless I’m mistaken (?), there isn’t anyway to wrap text in a responsive layout unless it, and all of its ancestors, are set to ‘fill’? This, combined with the lack of percentage-based widths, outside margins, and calc()-like functionality make it seemingly impossible to support truly responsive components.

Something as simple as positioning an icon at the end of text or expanding the height of the text when the width collapses should be essential behavior for responsive layouts. You shouldn’t be required to make a new fixed max-width variation for every breakpoint to support such basic, standard functionality. 

Damian_Summersall
New Participant
June 11, 2026

Likewise, this would be so handy in matching how our components work in dev. 

Callum T
New Member
June 11, 2026

Please Figma make this a feature. It’s so painful having over lapping text when I need for example.

[ Price: £10.00 per month ] < I want Per Month to wrap under this. But I can only get it if FILL which makes it look odd. [ Price:             £10.00 per month ] - I want my £10.00 content next to my Price text box. 

Carmen XiTrust
New Member
August 5, 2026

This really is a necessary feature #upvote