title: Views compressed by other views in SwiftUI VStack and List
body: <p>In my SwiftUI application, I'm trying to implement a UI similar to this:</p>
  
  <p><img src="https://i.stack.imgur.com/yYYv5.png" height="250" /></p>
  
  <p>I've added the two rows for category 1 and category 2. The result looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/MZVDM.png" height="250" /></p>
  
  <pre><code>NavigationView {
      VStack(alignment: .leading) {
          CategoryRow(...)
          CategoryRow(...)
          Spacer()
      }
      .navigationBarTitle(Text("Featured"))
  }
  </code></pre>
  
  <p>Now, when added the view for the third category – an <code>VStack</code> with images – the following happens:</p>
  
  <p><img src="https://i.stack.imgur.com/ldswm.png" height="250" /></p>
  
  <p>This happened, after I replaced <code>Spacer()</code>, with said <code>VStack</code>:</p>
  
  <pre><code>VStack(alignment: .leading) {
      Text("Rivers")
          .font(.headline)
      ForEach(self.categories["Rivers"]!.identified(by: \.self)) { landmark in
          landmark.image(forSize: 200)
      }
  }
  </code></pre>
  
  <p>My <code>CategoryRow</code> is implemented as follows:</p>
  
  <pre><code>VStack(alignment: .leading) {
      Text(title)
          .font(.headline)
      ScrollView {
          HStack {
              ForEach(landmarks) { landmark in
                  CategoryItem(landmark: landmark, isRounded: self.isRounded)
              }
          }
      }
  }
  </code></pre>
  
  <h2>Question</h2>
  
  <p>It seems that the views are compressed. I was not able to find any compression resistance or content hugging priority modifiers to fix this.<br>
  I also tried to use <code>.fixedSize()</code> and <code>.frame(width:height:)</code> on <code>CategoryRow</code>.</p>
  
  <p>How can I prevent the compression of these views?</p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>I've tried embedding the whole outer stack view in a scroll view:</p>
  
  <pre><code>NavigationView {
      ScrollView { // also tried List
          VStack(alignment: .leading) {
              CategoryRow(...)
              CategoryRow(...)
              ForEach(...) { landmark in
                  landmark.image(forSize: 200)
              }
          }
          .navigationBarTitle(Text("Featured"))
      }
  }
  </code></pre>
  
  <p>...and the result is worse:</p>
  
  <p><img src="https://i.stack.imgur.com/MuT1o.png" height="250" /></p>