ios – Which guidelines does VStack use to allocate house between subviews?

TL;DR Which guidelines does VStack use to distribute accessible house between its subviews. particularly when maxHeight: .infitiy is concerned.

Coming from UIKit and LayoutConstraints I nonetheless battle to get my head round how SwiftUI sizes its view.

After studying / watching totally different tutorials, docs, and so forth. I perceive that in the end every view determines its measurement itself. The father or mother view affords the accessible measurement, and the kid decides how huge it needs to be. For example this WWDC video reveals this with good examples.

Nonetheless, how does this work within the following VStack:

VStack(spacing: 0) {
    VStack {
        Textual content("High")
           .background(.blue)
    }
    .body(maxWidth: .infinity, maxHeight: .infinity)
    .background(.crimson)
    
    VStack {
        Textual content("Backside")
           .background(.yellow)
    }
    .body(maxWidth: .infinity, maxHeight: .infinity)
    .background(.inexperienced)
}
.body(maxWidth: .infinity, maxHeight: .infinity)

• The rootView affords the outer VStack the entire display measurement.
• The outer VStack provide this measurement to its youngsters and asks them how huge they need to be.
• The internal VStacks each comprise just one TextView. Usually they’d ask the textView how huge it needs to be and return this measurement as their very own. Nonetheless, the body modifier modifications this to infinit heigt.
• Each youngsters what infinite top. So the outer VStack give each 50% of the peak.

Is that this appropriate?

Textual content("Backside")
   .body(maxWidth: .infinity, maxHeight: .infinity)
   .background(.yellow)

Now the underside label requests infinite top for itself. Nonetheless the internal VStack solely provides it the accessible 50% of the display top.

However when including extra Subviews to the internal VStacks the 50% restrict doesn’t maintain:

VStack(spacing: 0) {
    VStack {
        Textual content("Top1")
        Textual content("...")
        Textual content("TopN")
    }
    .body(maxWidth: .infinity, maxHeight: .infinity)
    .background(.crimson)
    
    VStack {
        Textual content("Bottom1")
        Textual content("...")
        
        // ...
        
        Textual content("BottomN")
    }
    .body(maxWidth: .infinity, maxHeight: .infinity)
    .background(.inexperienced)
}
.body(maxWidth: .infinity, maxHeight: .infinity)

How is the Dimension calculated right here? Why does the underside VStack turns into larger than 50% on this case however not earlier than?