溢出-X 滚动显示:Flex，最后一个子项不显示父 div 填充和边距

Question

请查看最后一项，父div填充在这里不起作用。有什么帮助吗？

这是我的代码：

.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>

Answer 1

您可以使用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>

Answer 2

你可以添加一个带有opacity: 0的虚拟div来解决这个问题。

.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>

这不是解决问题的最优雅的解决方案。您也可以查看@soothran发布的答案。

Answer 3

您可以通过在列表末尾添加伪元素来解决此问题。

.horizontal-scrollable:after {
content:'';
width: 8px;
flex-shrink: 0;
}

Answer 4

display: inline-flex;仍然产生(几乎(相同的结果。尝试display:block;+display inline-block;方法来解决此问题。像这样的东西。

.horizontal-scrollable {
	padding: 15px;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hide;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	display: inline-flex;
	flex-wrap: nowrap;
	width: 100%;
}
.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;
	flex: 1;
}

<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>