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/