I have a horizontal scrollview that will display cards that have a vertical scrollview for some text. The vertical scrollview has a background image scaled to fill. The .scaledToFill modifier makes it so the vertical scrollview will no longer work in portrait mode. It works fine in landscape.

Here is an example:

struct ImagedScrollView: View {
    @State private var currentIndex: Int? = 0
    
    var body: some View {
        GeometryReader { geoProxy in
            let size = geoProxy.size
            
            ScrollViewReader { scrollProxy in
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHStack {
                        ForEach(0...35, id: \.self) { index in
                            let width = size.width-16
                            let height = size.height-16

                            ScrollView(.vertical, showsIndicators: false) {
                                VStack {
                                    ForEach(1...100, id:\.self) { _ in
                                        Text("Hello, World")
                                    }
                                }
                            }
                            .frame(width: width, height: height)
                            .background(
                                Image(.pic1)
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: width, height: height)
                                    .clipShape(RoundedRectangle(cornerRadius: 25.0))
                            )
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollContentBackground(.hidden)
                .scrollPosition(id: $currentIndex)
                .scrollTargetBehavior(.viewAligned)
                .padding(8)
            }
        }
    }
}

I've looked around and can't find a solution for this particular problem. I know it's a content size calculation issue, but because I don't fully understand the issue, I've been just hit-and-missing it with the vertical scrollview's frame (maxHeight, leaving off the height) or the Text("Hello, World") frame (specific heights). All misses, probably for obvious reasons, but I can't figure it.

I've tried the image in a ZStack as well as in the background modifier.