Skip to main content

We really need "fill" or "100%" option to set max-width and max-height!


Michel Araújo

Hey guys! I'm a product designer and a Figma lover. For along of those years, I saw Figma grown up and become even better, bringing to us designers a lot of new possibilities to work. But this is my first time that I want to request a feature ASAP, since creates a lot of pain. Hope everyone see this topic as something really useful too.

So, I usually works on web applications and thus I need to design both mobile, tablet and desktop version of the web pages.

And, when we speak about Design System, we need to make sure that our components will adapt on each screen, no matter the viewport size.

So, bringing this discussion to a real case: I made a component for my DS called “chip” with some variants as we can see on this print:

 The width’s component need to follow their inner content to keep growing on the sides as we can see:

but this growing effect (which is possible glad the ‘hug’) need to stop when reach the max width from the chip’s parent container and this, Figma can’t help me. So, the chip should grow to accommodate the text in width, up to a maximum determined by its parent, and then it should start growing downwards in height.

 

 I’ve tried a lot of things to simulate this behavior, creating equations and math to calculate the max-width based on the div/container where this chip are but none of the solutions really solves this issue. And I have problems like this:

 

Am I the only one suffering from this? Has anyone figured out how to get around this?

2 replies

SteffMueller
  • New Participant
  • 10 replies
  • April 9, 2025

+1
It will help greatly with auto-layouting elements that will sit next to each other.
 

Typical example is the cursor in an input field:

  • I want to have my text-value set to hug, so that the cursor next to it will follow the entered input (great in prototyping)
  • But also I want to set the max-width of the text-value to “fill” so that a value will not overflow the constraining box.
  • This is particularly tricky, if the input-element is fluid in witdh size. (otherwise I could just set a fixed max-width)

Dario1
  • New Participant
  • 7 replies
  • July 16, 2025

It’s straight forward to prototype the layout in a browser but I am also failing at finding a way in Figma that does not require to manually override the component instances layout to achieve the arrangement I am looking for, which in CSS is expressed something like:

max-width: 100%; 
width: fit-content;

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings