RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 23:37:36 +00:00
Code Issues Activity Actions

LibWeb: Don't overflow flex containers on margin auto

Browse source 
In case flex items had `margin: auto` on the primary flex axis, we were
still also distributing remaining space according to `justify-content`
rules. This lead to duplicated spacing in various places and overflows.

It looks like this issue was observed previously but missidentified
because there was logic to ignore margins at the start and end which
would partially paper over the root cause. However this created other
bugs (like for example not having a margin at beginning and end ;-)) and
I can find nothing in the spec or other browser behaviour that indicates
that this is something that should be done.

Now we skip justify-content space distribution alltogether if it has
already been distributed to auto margins.
This commit is contained in:
Mathis Wiehl 2023-03-10 21:46:18 +01:00 • committed by Andreas Kling
parent 3716e1b8a0
commit ab4cf7c57d
3 changed files with 92 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

27
Tests/LibWeb/Layout/input/flex-margin-auto-justify-content.html Normal file
View file

@ -0,0 +1,27 @@
<style>
body {
font-family: "SerenitySans";
}
.container {
display: flex;
justify-content: space-between;
border: 1px solid salmon;
width: 600px;
}
.box {
width: 150px;
height: 50px;
border: 1px solid black;
}
.box:nth-child(1) {
margin-left: 10px;
}
.box:nth-child(2) {
margin-right: auto;
}
</style>
<div class="container"><div class="box">left margin</div><div class="box">follow immediately</div><div class="box">over at the right</div></div>