overflow-x scrolling with display: flex, last child item not showing parent div padding and margin
You can use inline-flex
.
.wrapper-div {
width: 375px;
font-family: sans-serif;
background: red;
overflow-x: scroll;
}
.horizontal-scrollable {
padding: 15px;
white-space: nowrap;
overflow-y: hide;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
display: inline-flex;
flex-wrap: nowrap;
}
.year-tag {
background: #E6E7E8;
padding: 12px;
font-size: 12px;
line-height: 14px;
border: 0;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
margin-right: 8px;
margin-bottom: 8px;
}
<div class="wrapper-div">
<div class="horizontal-scrollable year-list">
<a class="year-tag">2020</a>
<a class="year-tag">2019</a>
<a class="year-tag">2018</a>
<a class="year-tag">2017</a>
<a class="year-tag">2016</a>
<a class="year-tag">2015</a>
<a class="year-tag">2014</a>
<a class="year-tag">2013</a>
<a class="year-tag">See More</a>
</div>
</div>