SwiftUI ScrollView and alignment

Question

Okay, I know SwiftUI is a shift in thinking, especially coming from a world of HTML and css. But I've spent like 4 days trying to get something to work that I feel should be pretty easy and just can't so please help!

I have an app where one screen is a table of results, dynamic data that could be one or two rows/columns but could also be hundreds. So I want to be able to scroll around in cases where the table is huge.

I've replicated my setup and reproduced my problems in a Swift playground like so

import Foundation
import UIKit
import PlaygroundSupport
import SwiftUI

struct ContentView : View {
    var cellSize: CGFloat = 50
    var numRows: Int = 3
    var numCols: Int = 3
    var body : some View {

        ZStack {
            ScrollView([.horizontal,.vertical]) {

                    HStack( spacing: 0) {
                        VStack ( spacing: 0) {
                            ForEach(0 ..< numRows, id: \.self) { row in
                                Text("row " + row.description)
                                    .frame( height: self.cellSize )
                            }
                        }
                        ForEach(0 ..< self.numCols, id: \.self) { col in
                            VStack( spacing: 0) {
                                ForEach(0 ..< self.numRows, id: \.self) { row in
                                    Rectangle()
                                    .stroke(Color.blue)
                                        .frame( width: self.cellSize, height: self.cellSize )
                                }
                            }
                        }
                    }
                  .frame( alignment: .topLeading)
            }
        }
    }
}

let viewController = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = viewController

Here's what I get when the grid is 3x3

I know things like to center by default in SwiftUI, but why isn't that .frame( alignment: .topLeading) on the HStack causing the table to be aligned to the upper left corner of the screen?

Then even worse, once that table gets large, here's what I get:

1. Still not aligned to the top left, which would make sense as a starting point.
2. When I scroll left, I can't even get to the point where I can see my header column
3. The view bounces me away from the edges when I get close. Like I can get to the point where I can see the top edge of the table, but it bounces me back right away.
4. A ton of whitespace to the right, which probably correlates to me not seeing my header columns on the left.

What am I doing wrong here? I'm exhausted trying all different frame and alignment options on various Views in here.

Frontward

The following topic SwiftUI How to align a view that's larger than screen width might be helpful. – Diadromous

I also have this problem. It seems to happen with StackViews in a ScrollView. It must be bug in SwiftUI, so unfortunately we can't do much... you could try a solution like in the above comment, but that's not ideal. I fear we'll have to wait for a fix... – Glider

see #60570782 – Dynode