The child of the #Stats tab, #unity-tab_content-container, is set to ‘auto’ width and flex. Note that this feature of the tabbed menu container is auto-generated and I cannot change the values in the inspector
The #StatsHolderVE Visual Element sits inside the container. I can give it an arbitrary size, but since the game should be playable at various screen resolutions I can’t use px or % to make it bigger than it’s parent. Presumably the container will grow if I fill it with longer rows, but I would like it to be spaced so the two columns take up have the screen size each, regardless of the resolution used. Because the parent object is unchangeable, I’m not sure how to do this.
Start with the basics: make an element that’s always the size of the screen. I actually think that’s the default anyway, so a UI document with a single element will fill the screen.
Now if you add two children in the same row, they will automatically take up 50% of the size each.
So I’m not sure what exactly you are stuck with. But general advice if you encounter one of those issues is to create the simplemost example in a test document to see what the minimal steps are to get to the behaviour you want. Because it’s easy to not see the forest for the trees (elements and their properties and styling). Also some properties may alter the behaviour which may be confusing, eg if you have an element with margin/padding it will always be offset and it’s easy to forget about this at times.
I think I have achieved what I was looking for by setting all of the children of #StatsHolderVE to use Positioning Mode > Absolute. Hate that it is absolute relative to it’s parent and not the true screen but it seems to work:
This is where you use USS styles and selectors to modify said visual elements. So if you want to modify the style of the #unity-tab__content-container, you make a USS style with that name and it will modify said visual element.
Definitely don’t get in the habit of using absolute positioning too much.