title: Position of ScrollView not consistent in main view
body: <p>I have a scrollview with an HStack inside it that is sized according to how many hexagons are to be placed in it. There are three possible values - 25, 64 and 100. The scrollview is positioned correctly for 25 and 64 hexagons, but is shifted to the right for 100. How can I make sure that is centred correctly too?</p>
  <p>Incidentally, I have already tried manually setting the position of the scrollview - it worked the same as without.</p>
  <p><a href="https://i.stack.imgur.com/YjlDL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YjlDL.png" alt="App with 64 hexagons" /></a>
  <a href="https://i.stack.imgur.com/MF7T3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MF7T3.png" alt="App with 100 hexagons" /></a></p>
  <pre><code>GeometryReader
  { scrollViewGeometry in
      ScrollView([.vertical, .horizontal], showsIndicators: true)
      {
          Spacer()
          HStack(spacing:-(max(minHexagonSize, smallSide)))
          {
              ForEach(viewModel.hexagons){hexagon in
                  let hexagonFrame = getFrameFor(hexagon: hexagon, minWidth: smallSide)
                  let colorArray = getColorsFor(hexagon: hexagon)
                  ZStack()
                  {
                      let thisIndex = hexagon.id
                      HexagonView(strokeColor: colorArray[0]).onTapGesture(perform: {
                          viewModel.chooseHexagon(hexagon: hexagon)
                      })
                      .scaleEffect(hexagon.pressed ? 1.2 : 1.0)
                      .animation(Animation.easeInOut(duration: 0.2))
                      if hexagon.isSelected
                      {
                          Circle().fill(playerColorArray[hexagon.playerIndex]).frame(width: hexagonFrame.width * fontScalingFactor, height: hexagonFrame.height * fontScalingFactor, alignment: .center)
                          Circle().stroke(Color.black).frame(width: hexagonFrame.width * fontScalingFactor, height: hexagonFrame.height * fontScalingFactor, alignment: .center)
                      }
                      else
                      {
                          Text(verbatim: String(thisIndex+1)).font(Font.system(size: hexagonFrame.size.width * fontScalingFactor)).foregroundColor(colorArray[1])
                          .onTapGesture(perform: {
                              Sounds.playSounds(soundName: &quot;pop&quot;)
                                  viewModel.chooseHexagon(hexagon: hexagon)
                          })
                          .scaleEffect(hexagon.pressed ? 1.2 : 1.0)
                          .animation(Animation.easeIn(duration: 0.5))
                      }
                      if hexagon.isSelected &amp;&amp; hexagon.pressed
                      {
                          Text(String(viewModel.currentScore))
                              .foregroundColor(Color.black)
                              .font(Font.system(size: hexagonFrame.size.width * fontScalingFactor)).foregroundColor(colorArray[1])
                              .transition(AnyTransition.asymmetric(insertion: .identity, removal: AnyTransition.move(edge: .top).combined(with: .opacity).animation(.easeIn(duration: 1.0))))
                              .animation(.easeIn(duration: 1.0))
                              .zIndex(hexagon.isSelected ? 1 : 0)
                      }
                  }
                  .position(x: hexagonFrame.origin.x - (scrollViewGeometry.size.width/2), y: scrollViewGeometry.size.height/2 - hexagonFrame.origin.y)
                  .frame(width: hexagonFrame.size.width, height: hexagonFrame.size.height)
                  .zIndex(hexagon.isSelected ? 1 : 0)
              }
          }
          .frame(width: (max(minHexagonSize, smallSide)) * (sqrt(CGFloat(viewModel.hexagons.count)) * 2), height: (max(minHexagonSize, smallSide) * (sqrt(CGFloat(viewModel.hexagons.count)) + 2)))
          //.position(x: scrollViewGeometry.size.width, y: scrollViewGeometry.size.height)
      }
      .padding()
  }
  </code></pre>