title: Equal widths of subviews with SwiftUI
body: <p>I'm trying to build a simple watchOS UI with SwiftUI with two pieces of information side-by-side above a button.</p>
  
  <p>I'd like each side (represented as a <code>VStack</code> within an <code>HStack</code>) to take up half of the available width (so it's an even 50/50 split within the yellow parent view) divided where the <em>|</em> character is centered on the button in the example below.</p>
  
  <p>I want the <em>Short</em> and <em>Longer!!!</em> text to each be centered within each side's 50%.</p>
  
  <p>I started with this code, to get the elements in place and show the bounds of some of the different stacks:</p>
  
  <pre><code>var body: some View {
      VStack {
          HStack {
  
              VStack {
                  Text("Short").font(.body)
              }
                  .background(Color.green)
  
              VStack {
                  Text("Longer!!!").font(.body)
              }
                  .background(Color.blue)
  
          }
              .frame(minWidth: 0, maxWidth: .infinity)
              .background(Color.yellow)
          Button (action: doSomething) {
              Text("|")
          }
      }
  }
  </code></pre>
  
  <p>Which gave me this result:
  <a href="https://i.stack.imgur.com/nSl4i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nSl4i.png" alt="starting point"></a></p>
  
  <p>Then, when it comes to making each side-by-side <code>VStack</code> 50% of the available width, I'm stuck. I thought it should work to add <code>.relativeWidth(0.5)</code> to each <code>VStack</code>, which should, as I understand it, make each <code>VStack</code> half the width of its parent view (the <code>HStack</code>, with the yellow background):</p>
  
  <pre><code>var body: some View {
      VStack {
          HStack {
  
              VStack {
                  Text("Short").font(.body)
              }
                  .relativeWidth(0.5)
                  .background(Color.green)
  
              VStack {
                  Text("Longer!!!").font(.body)
              }
                  .relativeWidth(0.5)
                  .background(Color.blue)
  
          }
              .frame(minWidth: 0, maxWidth: .infinity)
              .background(Color.yellow)
          Button (action: doSomething) {
              Text("|")
          }
      }
  }
  </code></pre>
  
  <p>But this is the result I get:
  <a href="https://i.stack.imgur.com/6rz77.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6rz77.png" alt="unexpected widths"></a></p>
  
  <p>How can I get the behavior I want with SwiftUI?</p>
  
  <hr>
  
  <p><strong>Update:</strong> After reviewing the SwiftUI documentation more, I see <a href="https://developer.apple.com/documentation/swiftui/securefield/3289408-relativewidth" rel="noreferrer">the example here</a> that sets a frame and then defines a relative width in comparison to that frame, so maybe I'm not supposed to use <code>relativeWidth</code> in this way?</p>
  
  <p>I'm a step closer to what I want with the following code:</p>
  
  <pre><code>var body: some View {
      VStack {
          HStack {
  
              VStack {
                  Text("Short").font(.body)
              }
                  .frame(minWidth: 0, maxWidth: .infinity)
                  .background(Color.green)
  
              VStack {
                  Text("Longer!!!").font(.body)
              }
                  .frame(minWidth: 0, maxWidth: .infinity)
                  .background(Color.blue)
  
          }
              .frame(minWidth: 0, maxWidth: .infinity)
              .background(Color.yellow)
          Button (action: doSomething) {
              Text("|")
          }
      }
  }
  </code></pre>
  
  <p>which produces this result:</p>
  
  <p><a href="https://i.stack.imgur.com/CLx40.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CLx40.png" alt="closer to expected result"></a></p>
  
  <p>Now, I am trying to figure out what's creating that extra space in the middle between the two <code>VStack</code>s. So far, experimenting with getting rid of padding and ignoring safe areas does not seem to affect it.</p>