I'm building a responsive alert banner and trying to achieve a behavior similar to fit-content in CSS. Here's what I need:
-
The banner container stretches to 100% width,
-
Inside, there's a button and a text label,
-
The text should stay on one line and hug its content until it reaches the limit of the container,
-
Once it can't fit anymore, it should wrap onto multiple lines (essentially behave like
fill).
Think of it as:
"hug content until there's no space left → then behave like fill".
This should happen dynamically, depending on the container width,
so no fixed max width.
Is there any way to simulate this behavior in Figma, maybe with some clever auto layout nesting or constraints?
Trying to avoid duplicating the component with two variants (hug and fill).
Thanks in advance for any ideas or workarounds!
