Why does a VisualElement get wider when I add a child?

I have three Visual Elements, one of them being parents of two. Because I set flex-direction to row, the 2 children both take 50% of the parent’s width.

The problem I am facing is that, when I add a element (like a button) to one of the children, the width of that child gets bigger. This is the case even when I hardcode width to be 50%. Why is this?

Before:


After:

I mean its the standard behaviour: elements will resize to fit their children. Think how a button gets wider to fit more text.

Have you set a max-width value?

Ah nice, thank you, the max-width did the trick.

But I still don’t really understand the behavior. The button is smaller than the container already, so why does the container need to get wider?

The other elements have a certain width they want to achieve, so when combined with another child element that also has a width it wants to reach, that adds to the overall width of the parent element.

Though I can’t say I understand everything about UI Toolkit layout, though it uses or uses a derivative of the yoga layout engine: https://www.yogalayout.dev/

hmm i see. thank you!