Auto layout - 200% width flexible elements?

Ask the community
1

So ran into a stumper, here’s the setup:

  • I have two frames (A & B) that each need to be 100% width of the top level parent, they need to be side by side.
  • They need to be able to adjust to hug the height, as the contents within will change in use.
  • They’re inside of a component, so the component needs to hug height so it can be used in instances with changing content.
  • I can’t find a way to have this work in a flexible way without setting fixed width on both Frame A & B - which means they work to scale the height, but don’t scale width-wise.

End goal is to have a component that I can scale horizontally, Frame A & B both stay at 100% width of it with the overflow hidden, and the height adjusts to content.

Here’s a sample file: Figma - it’s only a view for diagram purposes, but can push to community if that makes more sense.

Also a visual link for those who don’t want to open it in Figma: Imgur: The magic of the Internet

Any thoughts / solutions / weird hacks you’ve found to make something like this work?

2

Did this problem ever get solved? We have a similar issue and aren’t seeing an immediately obvious solution anywhere in the docs

3

So, our solve was to have a 0-height component that scaled for a variety of phone sizes - so it would have 375px wide, 390px wide, 414px wide, etc. - and it also had a 2x size. Then in our 200% width element, that component would set the width, and the half width elements were both set to fill in order to stay the same size.

That meant whenever we needed to adjust screen size or device, we just changed the width component and everything else adjusted proportionately around it. Not quite as flexible as we’d love to have, but it works well for our intended usage to show design intent and prototyping.

1 Like