From 6ecf7db87bf84e694282e57026f71795c0ddaa72 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Tue, 12 Jul 2022 00:17:13 +0200
Subject: [PATCH] LibWeb: Take margin box into account when justifying flex
 items

Before this patch, we were justifying based on the content box only,
which led to misalignments along the main axis when items had non-zero
padding, borders or margins.
---
 Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index bf1fbf4c00..134338256e 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1105,6 +1105,10 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
 
             if (is_main_axis_margin_second_auto(flex_item->box))
                 ++auto_margins;
+
+            used_main_space += flex_item->margins.main_before + flex_item->margins.main_after
+                + flex_item->borders.main_before + flex_item->borders.main_after
+                + flex_item->padding.main_before + flex_item->padding.main_after;
         }
 
         if (flex_line.remaining_free_space > 0) {