Make Text inside VStack take the whole width of the VStack - swift

Question

I'm trying to make two Text that are inside a VStack to take the whole width of the parent (the VStack).
I'm completely out of ideas.
This is what I have:
var body: some View {
VStack(alignment: .center, spacing: 0) {
Image("image")
.resizable()
.scaledToFill()
.frame(height: 190)
.clipped()
VStack(alignment: .leading, spacing: 8) {
Text(title)
.font(.title)
.background(Color.red)
.fixedSize(horizontal: false, vertical: true)
Text(subtitle)
.font(.subheadline)
.background(Color.yellow)
.fixedSize(horizontal: false, vertical: true)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.green)
.padding(.top, 24)
.padding(.horizontal, 24)
Button(buttonTitle) { print("Something") }
.frame(maxWidth: .infinity, minHeight: 56)
.background(Color.red)
.foregroundColor(.white)
.cornerRadius(56/2)
.padding(.top, 32)
.padding(.horizontal, 24)
.padding(.bottom, 20.0)
}.background(Color.blue)
.cornerRadius(38)
.frame(minWidth: 0, maxWidth: UIScreen.main.bounds.size.width - 48)
}
And this is how it looks:
I want the red and the yellow label to take the full width of the green VStack.
How can I achieve that?!

Answer 1

Remove the .fixedSize on both Text
Add .frame(minWidth: 0, maxWidth: .infinity) instead
In SwiftUI, it also matters the order of things, so you'll want to add the .background to after the .frame
Final result would be:
Text("title")
.font(.title)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.red)
To instead make it left aligned:
HStack {
Text("title")
.font(.title)
Spacer(minLength: 0)
}
.background(Color.red)

Answer 2

Here is possible solution
VStack(alignment: .leading, spacing: 8) {
Text(title)
.font(.title)
.frame(maxWidth: .infinity) // << here
.background(Color.red)
.fixedSize(horizontal: false, vertical: true)
Text(subtitle)
.font(.subheadline)
.frame(maxWidth: .infinity) // << here
.background(Color.yellow)
.fixedSize(horizontal: false, vertical: true)
}
.frame(maxWidth: .infinity) // << here