Fill height in scrollView in swiftUI

Question

I am coding useing swiftUI and I have a vertical scrollView (see screenshots), and inside that scrollView I have another horizontal scrollView, and below that I have a VStack that I want the height to fill the rest of the screen to the bottom of the vertical scrollView, but I can't seem to make it work.

The content in the vertical scrollView can be larger than the actually remaining space in some cases that is why I need a scrollView, but in some other cases the content is smaller than the remaining space

Here is the code I have :

    VStack {
        HeaderView
        
        ScrollView(.vertical, showsIndicators: false) {
            FriendsHorizontalScrollView()
            
            VStack {
                // I want this view to take all the remaining height left in the scrollView
                FullHeightView()
            }
            .frame(width: UIScreen.main.bounds.width)
        }
    }

What I end up having is something like this :

What I want to have :

I have tried several solutions like using geometryReader or putting .frame(maxHeight: .infinity) on the VStack but nothing seems to work properly.

Answer 1

This can be achieved by using GeometryReader. The idea is to set minHeight of your root view:

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { proxy in
            ScrollView {
                VStack(spacing: 0) {
                    Text("View 1")
                        .frame(height: 100)
                        .frame(maxWidth: .infinity)
                        .background(Color.green)
                    Text("View 2")
                        .frame(height: 100)
                        .frame(maxWidth: .infinity)
                        .background(Color.gray)
                    VStack {
                        Text("VStack")
                        Text("View 3")
                            .frame(height: 100)
                            .frame(maxWidth: .infinity)
                            .background(Color.blue)
                            .padding()
                    }
                    .frame(maxHeight: .infinity)
                    .background(Color.yellow)
                }
                .frame(minHeight: proxy.size.height)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}