What insane Autolayout logic is this?

Question

I create a new view controller.

I add a vertical stack to it. Spacing = 0, Alignment = Center X, Fill Equally. I constrain it to the 4 edges of its superview with space = 0.\

I add 3 horizontal stacks inside the main stack.

For each of the the horizontal stacks: alignment = Center Y, Fill Equally, spacing 0.

I add two custom views inside each of these 3 stacks.

I constrain the width of one of these stacks to the width of the main stack.

The result is insane.

Why in the name of heaven isn't the result like this?

Answer 1

I have found the solution: you must add a constrain in each of the custom views to Equal height of its stack view.

Answer 2

You do not need any constraints except of the top, leading, bottom and trailing constraints for your outer (vertical) stack view. Make sure that you set the alignment property to Fill and the distribution property to Fill Equally for all (vertical and horizontal) stack views.

Result: