Please take a look at the last item, parent div padding not working here. Any help?
Here is my code:
.horizontal-scrollable {
padding: 15px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hide;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
display: 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 style="width: 375px;font-family: sans-serif;background:red;">
<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>
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>
You can add a dummy div with opacity: 0
to solve this.
.horizontal-scrollable {
padding: 15px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hide;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
display: 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 style="width: 375px;font-family: sans-serif;background:red;">
<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 class="year-tag" style="opacity: 0; padding: 4px;"></div>
</div>
</div>
This is not the most elegant solution to fix the problem. You may also check the answer posted by @soothran.
You can fix this by adding a pseudo element to the end of the list.
.horizontal-scrollable:after {
content:'';
width: 8px;
flex-shrink: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With