diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
index be7303da24..3e7d109ea8 100644
--- a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
+++ b/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
diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt
new file mode 100644
index 0000000000..9158e3dd5d
--- /dev/null
+++ b/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>
diff --git a/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html b/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html
new file mode 100644
index 0000000000..eb6ac4f5f5
--- /dev/null
+++ b/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>
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 35b9c96016..dee505204f 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/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()) {
+        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;
-        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;
         }
 
         CSSPixels cursor_offset = initial_offset;