Comportamento inesperado do ViewThatFits: por que meu ScrollView não está renderizando para conteúdo grande no SwiftUI

Quero exibir meu conteúdo como está, centralizado verticalmente, se ele couber na altura da tela.

Só quero envolvê-lo ScrollViewse sua altura exceder a altura da tela.

Estou evitando colocá-lo em um ScrollViewpor padrão, porque conseguir centralização vertical dentro de um ScrollViewpode ser complicado.

Eu tento usar ViewThatFitscom ScrollView.

Eu uso o seguinte código para mostrar conteúdo de altura pequena.

Nenhum ScrollView é renderizado (comportamento correto)

import SwiftUI

struct ContentView: View {
    var largeContent: some View {
        VStack {
            Spacer()
            
            ForEach(1...20, id: \.self) { i in
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("\(i). Large content!")
                    .font(.largeTitle)
            }
            
            Spacer()
        }
    }
    
    var smallContent: some View {
        VStack {
            Spacer()
            
            ForEach(1...2, id: \.self) { i in
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("\(i). Small content!")
                    .font(.largeTitle)
            }
            
            Spacer()
        }
    }
    
    var body: some View {
        VStack {
            let smallContent = smallContent
            
            // The top portion dedicated to content
            GeometryReader { x in
                ViewThatFits {
                    // Option 1: Content fits without scrolling.
                    smallContent
                        .background(Color.yellow)
                        .frame(maxHeight: x.size.height)
                        .frame(maxWidth: .infinity)
                    
                    // Option 2: Content is too tall, so wrap it in a ScrollView.
                    ScrollView {
                        smallContent
                            .background(Color.red)
                            .frame(minHeight: x.size.height)
                            .frame(maxWidth: .infinity)
                    }
                }
            }
            
            Text("Button")
                .background(Color.blue)
                .font(.largeTitle)
        }
    }
}

Está dentro da minha expectativa porque

1. Não ScrollViewé renderizado.
2. O conteúdo é centralizado verticalmente.

Nenhum ScrollView é renderizado (comportamento errado)

import SwiftUI

struct ContentView: View {
    var largeContent: some View {
        VStack {
            Spacer()
            
            ForEach(1...20, id: \.self) { i in
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("\(i). Large content!")
                    .font(.largeTitle)
            }
            
            Spacer()
        }
    }
    
    var smallContent: some View {
        VStack {
            Spacer()
            
            ForEach(1...2, id: \.self) { i in
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("\(i). Small content!")
                    .font(.largeTitle)
            }
            
            Spacer()
        }
    }
    
    var body: some View {
        VStack {
            let largeContent = largeContent
            
            // The top portion dedicated to content
            GeometryReader { x in
                ViewThatFits {
                    // Option 1: Content fits without scrolling.
                    largeContent
                        .background(Color.yellow)
                        .frame(maxHeight: x.size.height)
                        .frame(maxWidth: .infinity)
                    
                    // Option 2: Content is too tall, so wrap it in a ScrollView.
                    ScrollView {
                        largeContent
                            .background(Color.red)
                            .frame(minHeight: x.size.height)
                            .frame(maxWidth: .infinity)
                    }
                }
            }
            
            Text("Button")
                .background(Color.blue)
                .font(.largeTitle)
        }
    }
}

#Preview {
    ContentView()
}

Agora, alterei para exibir "conteúdo grande". Esperava que a cor vermelha ScrollView fosse renderizada. No entanto, não foi.

Posso saber o que há de errado com meu código? Obrigado.