Gap moves children views outside containing view

[Mookiies]

Description

If using gap, justifyContent, and the first child is absolutely positioned, other children will be offset by the gap value.

This is unexpected because, the parent view should be containing the children, but it's not. Absolutely positioned children should not affect gap or the positioning of other views. Current behavior doesn't match CSS.

Somewhat related to https://github.com/facebook/react-native/issues/38044

Steps to reproduce

1. Setup a view with gap and a non-default justifyContent
2. Set position: 'absolute on the first child

React Native Version

0.73.7

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 13.6.4
  CPU: (10) arm64 Apple M1 Max
  Memory: 68.42 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.1
    path: ~/.asdf/installs/nodejs/18.19.1/bin/node
  Yarn:
    version: 4.1.1
    path: ~/.asdf/shims/yarn
  npm:
    version: 10.2.4
    path: ~/.asdf/installs/nodejs/18.19.1/bin/npm
  Watchman:
    version: 2023.09.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/<XXX>/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9514443
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/<XXX>/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@mookiies/gap-moving-child

Screenshots and Videos

Container has blue background and gap value of 100 Pink square is first child position: 'absolute with dimensions 50x50 Red square is second child with dimensions 100x100

Values	Expected	iOS/Android outcome
justifyContent: 'center'		Note how red-square, a normally positoned child element of the blue-square is extending beyond it by gap/2
justifyContent: 'flex-end'		Child positioned completely outside parent
justifyContent: 'flex-start'		Default works :)

Same behavior of gap affecting children persists with multiple children (2 children red squares)

Values	Expected	iOS/Android outcome
justifyContent: 'center'		Both children are offset by gap/2
justifyContent: 'flex-start'

Reproduction with web react: https://playcode.io/1850576