Bug 287485

Created attachment 474204 [details] Safari test (bug) Hey, With an overflowing grid or flex layout, the padding that overflows is being cut off in Webkit. This works fine in both Firefox and Chromium. Here is a minimal project that reproduces this: https://codepen.io/therealpaulplay/pen/ZYEEXpq HTML: <main> <div class="content"> <!-- Scrollable container with horizontal overflow and side padding --> <div class="scroll"> <div class="cards"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div> </div> </div> </main> CSS: /* The flex container */ .content { display: flex; align-items: center; height: 80vh; } /* The horizontally scrollable container with side padding */ .scroll { overflow-x: scroll; overflow-y: hidden; width: 100%; height: 100%; max-width: 700px; padding-inline: 50px; background-color: yellow; } /* The grid of “cards” laid out in a single row */ .cards { display: flex; gap: 10px; width: max-content; align-items: center; height: 100%; } /* Simple card styling */ .card { min-width: 300px; height: 100%; background: #ccc; display: flex; align-items: center; justify-content: center; } Video showcasing this in Safari + Firefox are attached.