Column width changed by children

Unity Engine
1

I have 2 columns that share the same class. When there is no content in the column they look exactly the same, but when I add something in one of the columns, that one becomes larger than the other one. I think I went over every setting in the UI builder but I can’t make them stay the same size.

There is currently a row element with 2 columns and each column has 2 cells. They all have flexbox grow=1 and de column has a vertical direction and the row and cell have a horizontal direction.

1064×510 24.5 KB

I assumed that intuitively the elements would not expand just because there is some content inside. And checking in the yogalayout playground that USS is based on the boxes don’t expand when they have content, see: the playground.

Is there a way to make the layout work this way but still allow it to stretch to their parent?

Update 25 January:
So I found another post where the developers say that at the moment you have to go through C# to define a proper table because there is no way to have dynamic table widths in the layout system. So making a table is harder at this time but we can make it work through C#.

What I don’t understand is how the content of the cells affects the size of it’s parent. While it is a very nice thing to have in some situations there doesn’t seem to be any way to stop it from doing so. I didn’t think CSS worked this way, but maybe I’m missing something

2

The flexbox grow property allow splitting the remaining free space (after considering the min-width of each element) between the component, proportionally to their “grow” value.

In your case, I think you want to set the width of each column to 50% on both column, This will let them have 50% of the width of their parent. There should not be any “space” left to grow, but I would set the grow and shrink to 0, overflow: hidden if you really want them to be always equals.