title: How to make a view as high as its content
body: <p>How can I make a view having a minimum size, a maximum size and inbetween consuming as much vertical space as it's content requires?</p>
  <pre><code>struct SubView&lt;Content: View&gt;: View {
      
      private let content: () -&gt; Content
      
      init(@ViewBuilder content: @escaping () -&gt; Content) {
          self.content = content
      }
      
      var body: some View {
          VStack(alignment: .leading) {
              
              Text(&quot;Text&quot;)
                  .padding([.leading, .trailing])
              
              ZStack {
                  Color(.red)
                  self.content()
              }
              .clipShape(RoundedRectangle(cornerRadius: 20))
          }
          .padding()
      }
  }
  
  struct SubView_Previews: PreviewProvider {
      static var previews: some View {
          VStack {
              SubView {
                  Text(&quot;A&quot;)
              }
              SubView {
                  VStack {
                      Text(&quot;A&quot;)
                      Text(&quot;B&quot;)
                      Text(&quot;C&quot;)
                      Text(&quot;D&quot;)
                  }
              }
          }
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/jvqu5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jvqu5.png" alt="enter image description here" /></a></p>
  <p>In the example above, both views are sized to maximum size. But I want to have both rectangles take the size of their content, like so:</p>
  <p><a href="https://i.stack.imgur.com/4eUnH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4eUnH.png" alt="enter image description here" /></a></p>
  <p>So far I only figured out how to set the fixed height or a infinite maxHeight using the frame modifier but non of these brings the required result.</p>