I am facing an issue with a container that scrolls horizontally. Inside this container, there are multiple items and I have added a margin to the last item on the right. However, in all browsers except for Safari, the margin is included in the scroll width.
To replicate the problem, simply run the sample in both Safari and Chrome and scroll to the right edge.
Does anyone know of a way to make Safari include the margin in the scroll width using only CSS/SCSS?
.scroll {
display: flex;
overflow-x: scroll;
background: red;
}
.item {
padding: 10px;
min-width: 50px;
height: 100px;
border: 1px solid #DDD;
background: #fff;
text-align:center;
}
.item:last-of-type {
margin-inline-end: 20px;
}
.container {
width: 200px;
margin: 40px auto;
border: 1px solid #DDD;
}<div class="container">
<div class="scroll">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>
</div>