Padding of a stacked frame interferes with its width when set to fill

[OndrejTom (Ondřej Toman)]

Current behavior
I have a frame with two nested elements inside. The parent frame has fixed width, both child elements have their width set to fill.

By default, both child elements have the same width - that’s the correct behavior.

If one of the child elements has a padding applied to it, it takes more space than element without a padding applied (see the attached video).

Expected behavior
Both child elements should have equal width, as stated in the documentation, no matter the padding applied.

Is this truly the intended behavior or a bug?

Thanks!

[dfmedrano (Jorge)]

Hi, @OndrejTom

That’s the expected behavior for the setup that appears in the video.

The same width behavior applies to multiple nested stacks. In this case, the direct children of the stack are a nested stack and a shape layer. When you add the padding to the stack, it grows but the shape doesn’t, which is expected. If you nest the shape inside a stack, each nested stack set to Fill will have the same width.

[OndrejTom (Ondřej Toman)]

Hey ! Thanks for the fast answer and clarification. It makes a lot of sense.

The reason why I thought this is a bug is because I (wrongly) assumed this behavior would be the same as it is in Figma. This is of course a not valid assumption, but what really made me ask here was the documentation:

If there are multiple nested stacks and all are set to Fill, each one will take an equal part of the space available.

I literally understood it as all elements will take equal part of available space (and my mind filled in “regardless padding”)

So again, thanks for your help and explanation!

Also TIL: I tried to quickly code this scenario in HTML / CSS and Sketch seems to correctly reflect how flex works in the browser (with the default box-spacing: content-box;). Super interesting!