Why will SwiftUI not display both views correctly?

Question

Essentially the Map view needs to be pinned to the top of the display. The scrollview will have the circle photo offset over the map, when pulled up the entire scrollview will cover the map view. I thought this would be easy to achieve but I forgot I'm dealing with an illogical SwiftUI. Any thoughts on if this even achievable? If it takes geometry reader or any-other boat code then its not worth writing or maintaining.

import SwiftUI
import MapKit

struct ImNew: View {
@Environment(\.openURL) var openURL
@State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 35.42,
            longitude: -106.24
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 0.002,
            longitudeDelta: 0.002
        )
    )
var body: some View {
    ScrollView {
    Image("image")
        .resizable()
        .frame(width: 300, height: 300)
        .offset(y: -130)
        .padding(.bottom, -130)
        .shadow(radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)

    VStack(alignment: .leading) {
        Text("title")
            .font(.title)

        HStack(alignment: .top) {
            Text("subtitle")
                .font(.caption)
            Spacer()
            Button(action: {
                openURL(URL(string: "https://maps.apple.com/?address=")!)
            }){
            Text(" Get Directions ")
                .font(.subheadline)}
            .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .stroke(Color.purple, lineWidth: 1)
                    )
        }

        HStack{
            Spacer()
            Text(" filler ")
                .font(.headline)
                .fontWeight(.bold)
                .padding(.top, 30.0)
            Spacer()
        }
        
        HStack{
            Spacer()
            Text(" filler2 ")
                .font(.caption)
                .foregroundColor(Color.gray)
            Spacer()
        }
        
    }
    .padding()

    Spacer()
    }
    
        VStack {
        Map(coordinateRegion: $region)
            .edgesIgnoringSafeArea(.top)
                            .frame(height: 300)
            
        ScrollView {
        Spacer()
        }

    
    }

}
}

Update:

I'm able to achieve the effect I want however... How would one allow the scrollview to fill the screen?

    var body: some View {

    VStack {
    Map(coordinateRegion: $region)
        .edgesIgnoringSafeArea(.top)
        .frame(height: 300)
            .frame(height: UIScreen.main.bounds.height * 0.2)
            //Image Logo Done

    ZStack{
    ScrollView {

Answer 1

Here is the solution I came up with... it's messy and has its problems but thats just SwiftUI.

import SwiftUI
import MapKit

struct ImNew: View {
@Environment(\.openURL) var openURL
@State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 38,
            longitude: -109
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 0.002,
            longitudeDelta: 0.002
        )
    )
var body: some View {

    VStack {
    Map(coordinateRegion: $region)
        .edgesIgnoringSafeArea(.top)
        .frame(height: 300)
            .frame(height: UIScreen.main.bounds.height * 0.2)
            //Image Logo Done

    ZStack{
    ScrollView {
        
        Image("BackgroundImage")
            .resizable()
            .frame(width: .infinity, height: 300)
            .offset(y: 575)
        
    Image("imnewcircle")
        .resizable()
        .frame(width: 300, height: 300)
        .shadow(radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
        .offset(y: 100)
        
    VStack(alignment: .leading) {
        Text("title")
            .font(.title)
            

        HStack(alignment: .top) {
            Text("subtitle")
                .font(.caption)
            Spacer()
            Button(action: {
                openURL(URL(string: "https://maps.apple.com/?")!)
            }){
            Text(" Get Directions ")
                .font(.subheadline)}
            .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .stroke(Color.purple, lineWidth: 1)
                    )
        }
        .padding(.top, 5)
        
        HStack{
            Spacer()
            Text(" tile1 ")
                .font(.headline)
                .fontWeight(.bold)
                .padding(.top, 30.0)
            Spacer()
        }
        
        HStack{
            Spacer()
            Text(" tile2 ")
                .font(.caption)
                .padding(.top, 30.0)
                .foregroundColor(Color.gray)
            Spacer()
        }
        
    }.padding(.horizontal)
    .background(Color("Background"))        .offset(y: 100)

    }
    .padding(.all, 1.0)

    Spacer()
        
    }
    .padding(.top, -500.0)
    .frame(alignment: .topLeading)
    .padding(/*@START_MENU_TOKEN@*/.horizontal/*@END_MENU_TOKEN@*/)
    }
}
}