Views compressed by other views in SwiftUI VStack and List

Question

In my SwiftUI application, I'm trying to implement a UI similar to this:

I've added the two rows for category 1 and category 2. The result looks like this:

NavigationView {     VStack(alignment: .leading) {         CategoryRow(...)         CategoryRow(...)         Spacer()     }     .navigationBarTitle(Text("Featured")) } 

Now, when added the view for the third category – an VStack with images – the following happens:

This happened, after I replaced Spacer(), with said VStack:

VStack(alignment: .leading) {     Text("Rivers")         .font(.headline)     ForEach(self.categories["Rivers"]!.identified(by: \.self)) { landmark in         landmark.image(forSize: 200)     } } 

My CategoryRow is implemented as follows:

VStack(alignment: .leading) {     Text(title)         .font(.headline)     ScrollView {         HStack {             ForEach(landmarks) { landmark in                 CategoryItem(landmark: landmark, isRounded: self.isRounded)             }         }     } } 

Question

It seems that the views are compressed. I was not able to find any compression resistance or content hugging priority modifiers to fix this.
I also tried to use .fixedSize() and .frame(width:height:) on CategoryRow.

How can I prevent the compression of these views?

---

Update

I've tried embedding the whole outer stack view in a scroll view:

NavigationView {     ScrollView { // also tried List         VStack(alignment: .leading) {             CategoryRow(...)             CategoryRow(...)             ForEach(...) { landmark in                 landmark.image(forSize: 200)             }         }         .navigationBarTitle(Text("Featured"))     } } 

...and the result is worse:

Answer 1

You might prevent the views in VStack from being compressed by using

  .fixedSize(horizontal: false, vertical: true) 

For example: I have the following VStack:

VStack(alignment: .leading){         ForEach(group.items) {             FeedCell(item: $0)         }     } 

Which render compressed Text()

When I add .fixedSize(horizontal: false, vertical: true) it doesn't compress anymore

VStack(alignment: .leading){         ForEach(group.items) {             FeedCell(item: $0)                 .fixedSize(horizontal: false, vertical: true)         }     }