My container has a fixed width causing its children to overflow and require scrolling. Each child element (.box) has a margin-right: 10px. The margin is visible on all elements except the last one, where it is cut off at the edge of the element. I want to display the margin for the last element without resorting to adding unnecessary divs for spacing, as that seems like a messy solution.
The orange area should remain inside the container (red outline)
https://i.sstatic.net/Urm3O.png
Check out the editable codepen here: https://codepen.io/starkana/pen/wvMjdjY
.container {
display: flex;
flex-flow: row nowrap;
border: 1px solid red;
width: 170px;
overflow: scroll;
padding: 0px;
}
.box {
background: gray;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
display: flex;
margin-right: 10px !important;
flex-shrink: 0;
}<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>