How to make equal height subviews in HStack

By default, a text view and a button will take up enough space for its content.

HStack will grow its height to match the largest child view. This results in uneven height for each child in that HStack.

We will learn how to make all child views inside an HStack have an equal height using the .frame and .fixedSize modifiers.

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("Hello,")
                Text("world")
                Text("!")
            }
            .background(.pink)
            Text("Hi, 🌎!")
                .background(.yellow)
        }
        .background(.orange)
        .font(.system(size: 36).bold())
    }
}

Each child's views have a different height.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

How to make equal height subviews in HStack

To make an equal height subviews in HStack, you need two modifiers.

1. .frame(maxHeight: .infinity)
2. .fixedSize(horizontal: false, vertical: true)

The combination of these two modifiers makes HStack height equal to the tallest child while all of its subviews take the full available height possible.

struct ContentView: View {
    var body: some View {
        HStack {
            // 1
            VStack {
                Text("Hello,")
                Text("world")
                Text("!")
            }
            .frame(maxHeight: .infinity)
            .background(.pink)
            // 2
            Text("Hi, 🌎!")
                .frame(maxHeight: .infinity)
                .background(.yellow)
        }
        // 3
        .fixedSize(horizontal: false, vertical: true)
        .background(.orange)
        .font(.system(size: 36).bold())
    }
}

3 On HStack, setting .fixedSize(horizontal: false, vertical: true) will constraint HStack height to its tallest child.
1, 2 For each child, we set frame's maxHeight to .infinity. This is a way for a child view to tell the parent (HStack) that it wants to take as much space as possible on the vertical axis.

The result is

1. The HStack height matches the tallest child (1 VStack).
2. And 2 Text("Hi, 🌎!") take the same possible height which you can see from the yellow background.