title: SwiftUI Nested GeometryReader - Breaking UI
body: <p>So I am trying to understand why my subview (<code>TopView</code>) is having weird resizing issues.</p>
  <p>Here is the sample</p>
  <pre><code>import SwiftUI
  
  struct ContentView: View {
      @State var isInterfaceHidden: Bool = false
  
      var body: some View {
          VStack(spacing: 0, content: {
              if !isInterfaceHidden {
                  TopView()
                      .background(Color.yellow)
              }
              Rectangle()
                  .foregroundColor(Color.red)
                  /// We make sure it won't cover the top and bottom view.
                  .zIndex(-1)
              if !isInterfaceHidden {
                  Rectangle()
                      .foregroundColor(Color.yellow)
                      .frame(height: 80)
              }
          })
          .navigationBarTitle(&quot;&quot;)
          .navigationBarHidden(true)
      }
  }
  
  struct TopView: View {var body: some View {
          HStack(content: {
              VStack(spacing: 0, content: {
                  Text(&quot;Text to show, it is a title.&quot;)
                      .tracking(0.2)
                      .foregroundColor(.white)
                      .lineLimit(1)
                  GeometryReader(content: { geometry in
                      Text(&quot;Text to show, it is a subline.&quot;)
                          .tracking(0.2)
                          .foregroundColor(.white)
                          .lineLimit(1)
                  })
                  .background(Color.purple)
              })
          })
          .padding([.leading, .trailing], 20)
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/JfmKH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JfmKH.png" alt="enter image description here" /></a></p>
  <p>I tried to set a <code>.fixedSize()</code> like this:</p>
  <pre><code>GeometryReader(content: { geometry in
      Text(&quot;Text to show, it is a subline.&quot;)
          .tracking(0.2)
          .foregroundColor(.white)
          .lineLimit(1)
      })
      .background(Color.purple)
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Cnu3K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cnu3K.png" alt="enter image description here" /></a></p>
  <p>But it is not fitting the text exactly, so I am not sure if this is the right solution. Do you guys have any idea?</p>