How to stretch child items in horizontal auto-layout layer?

I have a nested autolayout layer with some other auto layout items in it. This is how it looks like.

What I want is, when I resize the parent tabs layer, I want the child elements to stretch and fill the whole area but not fall below 20px left and right padding for child elements.

To keep minimum padding I need to auto layout child elements. But in this way I lose stretch feature…Any ideas how can I achieve this?

Hi @orcun. I believe it’s possible to create a tab bar where the children items stretch, but not at the same time as keeping the minimum padding. To make the children items stretch you need to change all the Tabs in the Tabs component so that the resizing width is set to “Fill container”.

As a workaround to the minimum padding issue, you could create two variants of the Tabs component. One where the children items are set to hug, and one where they are set to fill.

Feel free to duplicate the example I created, below.

1 Like

THIS IS CLEVER! Thanks man!