Cannot remove unwanted space from this VStack - swiftui

Question

I really cannot figure out what is pushing my Detail HStack View down to the bottom of the page. I've tried adding spacers and other tweaks but no success. You'll find the entire code below, its compile-ready as is.
import SwiftUI
struct ContentView: View {
var body: some View {
GeometryReader { geo in
VStack() {
VideoPlayerView()
.frame(width: geo.size.width, alignment: .center)
CategoryScrollView()
Spacer()
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct CategoryScrollView: View {
var body: some View {
HStack {
VStack {
Text("Category")
.font(.system(size: 30))
}
Divider()
VStack {
Text("Chapter")
.font(.system(size: 30))
}
Divider()
VStack {
Text("Lesson")
.font(.system(size: 30))
}
}.frame(height: 100)
}
}
struct CategoryScrollView_Previews: PreviewProvider {
static var previews: some View {
CategoryScrollView()
}
}
struct VideoPlayerView: View {
var body: some View {
GeometryReader { geo in
ZStack(alignment: .center) {
Rectangle()
.frame(height: geo.size.width / 1.4)
.cornerRadius(50)
Image(systemName: "play.fill")
.resizable()
.foregroundColor(.blue)
.frame(width: geo.size.width / 5,height: geo.size.width / 4)
}
}
}
}
struct VideoPlayerView_Previews: PreviewProvider {
static var previews: some View {
VideoPlayerView()
}
}

Answer 1

If unconstrained, the GeometryReader takes all available space.
You need to set the height of the VideoPlayerView as well:
struct ContentView: View {
var body: some View {
GeometryReader { geo in
VStack {
VideoPlayerView()
.frame(width: geo.size.width, height: geo.size.height / 4, alignment: .center)
CategoryScrollView()
Spacer()
}
}
}
}
Also, you can remove frame(height: 100) from the CategoryScrollView:
struct CategoryScrollView: View {
var body: some View {
HStack {
VStack {
Text("Category")
.font(.system(size: 30))
}
Divider()
VStack {
Text("Chapter")
.font(.system(size: 30))
}
Divider()
VStack {
Text("Lesson")
.font(.system(size: 30))
}
}
// .frame(height: 100) // remove this
}
}
If necessary, you can specify this in the parent view using GeometryReader instead of hardcoding values.

Answer 2

I would add this frame to the GeometryReader.
GeometryReader { geo in
VStack() {
VideoPlayerView()
.frame(width: geo.size.width, alignment: .center)
CategoryScrollView()
Spacer()
}.frame(maxHeight:geo.size.height/2)
}