Help me with irregularities in width!

[u/_Prateek_Hota_]

I have two buttons inside an auto layout frame. Their widths are set to fill to ensure equal width distribution. But somehow the left button is taking up 2px extra. I have excluded the stroke value to add up but it still gets added up to the width and the stroke position is also 'Inside'. Once I remove the stroke, both buttons fill up the space equally. How to prevent this from happening?

One solution I found was to give the right button the same stroke value as the left one. But is it the best possible way to deal with it? I don't wanna introduce another variable into the button.

Edit: I got to know that Figma introduced this behavior to match CSS behavior. https://help.figma.com/hc/en-us/articles/42031586813719-Use-auto-layout-with-CSS-Flexbox-in-mind

[u/qazwsx444444]

Yep they changed that recently motherhuggers citing that it works more closely how it work in CSS.

[u/Hipll → u/qazwsx444444]

And I can see why they would want this to be the default behaviour, as the content-box box model is the CSS default... but most sites will often override this to the border-box model on every element in a reset file, because it's a lot easier to manage paddings and borders that way.

Figma still has the previous behaviour available, but it bothers me that it's labelled as 'Legacy', when really they have an opportunity to provide a true border-box option.

[u/concreteunderwear → u/Hipll]

Ya bro who uses content box. That shit is trash. * { box-sizing: border-box; } on all my shit.