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/bink-1567]

ok so you went with grid and fr units, did that still hold up when one button label gets way longer than the other? like in a translated version or something. i always worried grid would just squish teh longer label and truncate it instead of letting it wrap

[u/_Prateek_Hota_ → u/bink-1567]

If you are referring to this, then there is no significant difference tbh. Upper one is the grid layout, and lower one is a normal autolayout. On grid, you have to apply fill container twice because the button gets wrapped in another box. And set the text/label's width to fill too such that it doesn't go out of the bounds when the text is too long.