LibWeb: Handle auto margins with flex and justify-content

Auto margins used together with justify-content would previously
result in children being positioned outside their parent. This was
solved by letting auto margins take precedence when they are used,
which was already implemented to some extent before, but not
fully.

Tests/LibWeb/Layout/expected/flex/justify-content-1.txt

@@ -148,9 +148,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.row.reverse.outer.start> at (11,507) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,508) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (116,508) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 5, rect: [12,508 41.234375x17.46875]
+            frag 0 from TextNode start: 0, length: 5, rect: [116,508 41.234375x17.46875]
               "start"
           TextNode <#text>
         BlockContainer <div> at (64,508) content-size 50x50 flex-item [BFC] children: inline
@@ -158,9 +158,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
             frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (116,508) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,508) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [116,508 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,508 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline
@@ -202,9 +202,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.row.reverse.outer.flex-end> at (11,693) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,694) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (116,694) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 8, rect: [12,694 61.765625x17.46875]
+            frag 0 from TextNode start: 0, length: 8, rect: [116,694 61.765625x17.46875]
               "flex-end"
           TextNode <#text>
         BlockContainer <div> at (64,694) content-size 50x50 flex-item [BFC] children: inline
@@ -212,9 +212,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
             frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (116,694) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,694) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [116,694 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,694 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline
@@ -436,9 +436,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,3418) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.column.reverse.outer.start> at (11,3419) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,3420) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,3524) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 5, rect: [12,3420 41.234375x17.46875]
+            frag 0 from TextNode start: 0, length: 5, rect: [12,3524 41.234375x17.46875]
               "start"
           TextNode <#text>
         BlockContainer <div> at (12,3472) content-size 50x50 flex-item [BFC] children: inline
@@ -446,9 +446,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
             frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (12,3524) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,3420) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,3524 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,3420 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline
@@ -490,9 +490,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       BlockContainer <(anonymous)> at (10,4324) content-size 780x0 children: inline
         TextNode <#text>
       Box <div.column.reverse.outer.flex-end> at (11,4325) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
-        BlockContainer <div> at (12,4326) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4430) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 8, rect: [12,4326 61.765625x17.46875]
+            frag 0 from TextNode start: 0, length: 8, rect: [12,4430 61.765625x17.46875]
               "flex-end"
           TextNode <#text>
         BlockContainer <div> at (12,4378) content-size 50x50 flex-item [BFC] children: inline
@@ -500,9 +500,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
             frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17.46875]
               "a"
           TextNode <#text>
-        BlockContainer <div> at (12,4430) content-size 50x50 flex-item [BFC] children: inline
+        BlockContainer <div> at (12,4326) content-size 50x50 flex-item [BFC] children: inline
           line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [12,4430 9.46875x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [12,4326 9.46875x17.46875]
               "b"
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline

Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt

@@ -0,0 +1,293 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x2930 [BFC] children: not-inline
+    BlockContainer <body> at (10,10) content-size 780x2912 children: not-inline
+      BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.outer.start> at (11,11) content-size 300x60 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (60,12) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 5, rect: [60,12 41.234375x17.46875]
+              "start"
+          TextNode <#text>
+        BlockContainer <div> at (160,12) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [160,12 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (260,12) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [260,12 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,72) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.outer.flex-start> at (11,73) content-size 300x60 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (60,74) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 10, rect: [60,74 76.8125x17.46875]
+              "flex-start"
+          TextNode <#text>
+        BlockContainer <div> at (160,74) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [160,74 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (260,74) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [260,74 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,134) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.outer.end> at (11,135) content-size 300x60 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (12,136) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [12,136 26.1875x17.46875]
+              "end"
+          TextNode <#text>
+        BlockContainer <div> at (112,136) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [112,136 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (212,136) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [212,136 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,196) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.outer.flex-end> at (11,197) content-size 300x60 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (12,198) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 8, rect: [12,198 61.765625x17.46875]
+              "flex-end"
+          TextNode <#text>
+        BlockContainer <div> at (112,198) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [112,198 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (212,198) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [212,198 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,258) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.reverse.outer.start> at (11,259) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (260,260) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 5, rect: [260,260 41.234375x17.46875]
+              "start"
+          TextNode <#text>
+        BlockContainer <div> at (160,260) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [160,260 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (60,260) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [60,260 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,320) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.reverse.outer.flex-start> at (11,321) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (260,322) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 10, rect: [260,322 76.8125x17.46875]
+              "flex-start"
+          TextNode <#text>
+        BlockContainer <div> at (160,322) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [160,322 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (60,322) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [60,322 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,382) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.reverse.outer.end> at (11,383) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (212,384) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [212,384 26.1875x17.46875]
+              "end"
+          TextNode <#text>
+        BlockContainer <div> at (112,384) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [112,384 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (12,384) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,384 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,444) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.row.reverse.outer.flex-end> at (11,445) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (212,446) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 8, rect: [212,446 61.765625x17.46875]
+              "flex-end"
+          TextNode <#text>
+        BlockContainer <div> at (112,446) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [112,446 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (12,446) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,446 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.outer.start> at (11,507) content-size 60x300 flex-container(column) [FFC] children: not-inline
+        BlockContainer <div> at (20,508) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 5, rect: [20,508 41.234375x17.46875]
+              "start"
+          TextNode <#text>
+        BlockContainer <div> at (20,560) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,560 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (20,612) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,612 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,808) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.outer.flex-start> at (11,809) content-size 60x300 flex-container(column) [FFC] children: not-inline
+        BlockContainer <div> at (20,810) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 10, rect: [20,810 76.8125x17.46875]
+              "flex-start"
+          TextNode <#text>
+        BlockContainer <div> at (20,862) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,862 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (20,914) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,914 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,1110) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.outer.end> at (11,1111) content-size 60x300 flex-container(column) [FFC] children: not-inline
+        BlockContainer <div> at (12,1256) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [12,1256 26.1875x17.46875]
+              "end"
+          TextNode <#text>
+        BlockContainer <div> at (12,1308) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,1308 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (12,1360) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,1360 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,1412) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.outer.flex-end> at (11,1413) content-size 60x300 flex-container(column) [FFC] children: not-inline
+        BlockContainer <div> at (12,1558) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 8, rect: [12,1558 61.765625x17.46875]
+              "flex-end"
+          TextNode <#text>
+        BlockContainer <div> at (12,1610) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,1610 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (12,1662) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,1662 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,1714) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.reverse.outer.start> at (11,1715) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (20,1820) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 5, rect: [20,1820 41.234375x17.46875]
+              "start"
+          TextNode <#text>
+        BlockContainer <div> at (20,1768) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,1768 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (20,1716) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,1716 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,2016) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.reverse.outer.flex-start> at (11,2017) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (20,2266) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 10, rect: [20,2266 76.8125x17.46875]
+              "flex-start"
+          TextNode <#text>
+        BlockContainer <div> at (20,2214) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,2214 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (20,2162) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [20,2162 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,2318) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.reverse.outer.end> at (11,2319) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (12,2568) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [12,2568 26.1875x17.46875]
+              "end"
+          TextNode <#text>
+        BlockContainer <div> at (12,2516) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,2516 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (12,2464) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,2464 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,2620) content-size 780x0 children: inline
+        TextNode <#text>
+      Box <div.column.reverse.outer.flex-end> at (11,2621) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
+        BlockContainer <div> at (12,2726) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 8, rect: [12,2726 61.765625x17.46875]
+              "flex-end"
+          TextNode <#text>
+        BlockContainer <div> at (12,2674) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,2674 9.34375x17.46875]
+              "a"
+          TextNode <#text>
+        BlockContainer <div> at (12,2622) content-size 50x50 flex-item [BFC] children: inline
+          line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [12,2622 9.46875x17.46875]
+              "b"
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (10,2922) content-size 780x0 children: inline
+        TextNode <#text>

Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html><style>
+* {
+    border: 1px solid black !important;
+}
+      .outer {
+        display: flex;
+        background: wheat;
+      }
+      .outer.row {
+        width: 300px;
+        height: 60px;
+      }
+      .outer.column {
+        width: 60px;
+        height: 300px;
+      }
+      .outer > div {
+        width: 50px;
+        height: 50px;
+        background: orange;
+      }
+      .flex-start { justify-content: flex-start; }
+      .flex-end { justify-content: flex-end; }
+      .start { justify-content: start; }
+      .end { justify-content: end; }
+      .flex-start div, .start div {
+          margin-left: auto;
+      }
+      .flex-end div, .end div {
+          margin-right: auto;
+      }
+      .row { flex-direction: row; }
+      .row.reverse { flex-direction: row-reverse; }
+      .column { flex-direction: column; }
+      .column.reverse { flex-direction: column-reverse; }
+      .reverse > div {
+          background: magenta;
+      }
+</style>
+<body>
+<div class="row outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="row outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="row outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="row outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="row reverse outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="row reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="row reverse outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="row reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="column outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="column outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="column outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="column outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
+<div class="column reverse outer start"><div>start</div><div>a</div><div>b</div></div>
+<div class="column reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
+<div class="column reverse outer end"><div>end</div><div>a</div><div>b</div></div>
+<div class="column reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -1367,26 +1367,28 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
         };
         auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
 
-        switch (flex_container().computed_values().justify_content()) {
-        case CSS::JustifyContent::FlexStart:
-        case CSS::JustifyContent::Center:
-        case CSS::JustifyContent::SpaceAround:
-        case CSS::JustifyContent::SpaceBetween:
-        case CSS::JustifyContent::SpaceEvenly:
-            if (is_direction_reverse()) {
-                flex_region_render_cursor = FlexRegionRenderCursor::Right;
-            }
-            break;
-        case CSS::JustifyContent::End:
-            flex_region_render_cursor = FlexRegionRenderCursor::Right;
-            break;
-        case CSS::JustifyContent::FlexEnd:
-            if (!is_direction_reverse()) {
+        if (auto_margins == 0) {
+            switch (flex_container().computed_values().justify_content()) {
+            case CSS::JustifyContent::FlexStart:
+            case CSS::JustifyContent::Center:
+            case CSS::JustifyContent::SpaceAround:
+            case CSS::JustifyContent::SpaceBetween:
+            case CSS::JustifyContent::SpaceEvenly:
+                if (is_direction_reverse()) {
+                    flex_region_render_cursor = FlexRegionRenderCursor::Right;
+                }
+                break;
+            case CSS::JustifyContent::End:
                 flex_region_render_cursor = FlexRegionRenderCursor::Right;
+                break;
+            case CSS::JustifyContent::FlexEnd:
+                if (!is_direction_reverse()) {
+                    flex_region_render_cursor = FlexRegionRenderCursor::Right;
+                }
+                break;
+            default:
+                break;
             }
-            break;
-        default:
-            break;
         }
 
         CSSPixels cursor_offset = initial_offset;