Text has only one line when put in HStack with something else (SwiftUI List)

Question

im trying to show a list of items. Every row should contain a stripe on the left in a specific color and a headline. This headline is sometimes more than a line long but only shows as one line and "...". When I remove the Stripe it shows as multiline text. I've attached the code and two pictures for comparison

Heres my code :

HStack {
    Rectangle()
        .foregroundColor(poll.outcome ? .green : .red)
        .frame(width: 3)
    VStack {
        Text(poll.poll.title!).font(.headline)
            .lineLimit(2)
    }
}

This is how it looks without the Rectangle:

And with the Rectangle:

Answer 1

In a List or ScrollView the SwiftUI engine will compress back the text area. .lineLimit(x) give you a maximum of line, not a minimum ;) To secure that the engine does not shrink back the Text height and goes up to the maximum limit, add .fixedSize(horizontal: false, vertical: true) as shown below

HStack {
        Rectangle()
            .foregroundColor(.red)
            .frame(width: 3)
        VStack {
            Text("line1\nline2\nline3").font(.headline)
                .lineLimit(2)
                .multilineTextAlignment(.leading)
                .fixedSize(horizontal: false, vertical: true)
        }
    }

Answer 2

SwiftUI has some bugs right now and it is one of them and there is some discussion on this answer that you can check out.

Although It works on my machine, if you have any trouble about sizing elements, you can use Spacers as a workaround until all SwiftUI bugs fix by Apple.

For this case, you can wrap your text between two spacers like this:

VStack {
    Spacer()

    Text("FirstLine\nSecondLine\nThirdLine")
    .font(.headline)
    .lineLimit(2)

    Spacer()
}