mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 07:32:44 +00:00
ab4cf7c57d
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.
27 lines
571 B
HTML
27 lines
571 B
HTML
<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>
|