SwiftUI GroupBoxStyle fill height - swiftui

Question

I have a custom GroupBoxStyle where I would like to add a think coloured line to its left edge that takes the entire height of the GroupedBox. This GroupedBox is then used in rows in a VStack
Here in blue is the content of the GroupBox, in yellow is that line I want to add. The blue content can be any view.
In my my current implementation (see below) but the problem is that the vertical line does not take all the height of the GroupBox
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
ScrollView {
VStack(spacing: 8) {
GroupBox {
HStack {
VStack {
Text("Hello")
Text("Hello")
Text("Hello")
Text("Hello")
}
Spacer()
}
}
GroupBox {
Color.blue
.frame(height: 50)
}
}
// try to uncomment this
// .padding(8)
}
.groupBoxStyle(StandardGroupBoxStyle())
.navigationBarTitle("My Group", displayMode: .large)
}
}
}
public struct StandardGroupBoxStyle: GroupBoxStyle {
public func makeBody(configuration: Self.Configuration) -> some View {
HStack(spacing: 0) {
Color.yellow
.frame(width: 5)
.frame(maxHeight: .infinity)
VStack {
configuration
.content
}
.border(Color.green)
Spacer()
}
.border(Color.red)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
This implementation and example creates this (note the yellow not taking the entire height of the row.

Answer 1

Here is a solution (I kept original extra modifiers, but assume they are for debug purpose). Tested with Xcode 12.1 / iOS 14.1
public struct StandardGroupBoxStyle: GroupBoxStyle {
public func makeBody(configuration: Self.Configuration) -> some View {
HStack(spacing: 0) {
configuration.content
.padding(.leading, 5)
.border(Color.green) // << debug?
Spacer() // << debug?
}
.overlay(Color.yellow.frame(width: 5), alignment: .leading)
.border(Color.red) // << debug?
}
}