我有一个水平滚动元素(overflow-x:scroll
)与包含弹性项目的弹性容器。我正在尝试将背景应用于弹性容器。
但正如您在下面的示例中看到的(尝试向左/向右滚动),背景仅应用于视口的可见部分(橙色)。有没有什么方法可以将其扩展到全宽,而不必为每个颜色着色.item
?
.list-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: tomato;
margin-bottom: 10px;
}
.item {
flex: 0 0 100px;
height: 100px;
margin-right: 10px;
background-color: skyblue;
opacity: 0.6;
}
.crop-container {
width: 300px;
overflow-x: scroll;
}
.item:first-child {
margin-left: 10px;
}
.item:last-child {
margin-right: 10px;
}
<div class='crop-container'>
<div class='list-container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<div class='list-container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
这是带有注释的更新代码:
.list-container {
/* width:100% Removed to allow element to expand */
display: inline-flex; /* inline to fit content width */
/*flex-direction: row;
flex-wrap: nowrap; Not needed since it the default behavior */
background: tomato;
margin-bottom: 10px;
}
.item {
width: 100px; /* Width instead of flex-basis */
flex-shrink:0; /* Avoid the shrinking*/
height: 100px;
margin-right: 10px;
background-color: skyblue;
opacity: 0.6;
}
.crop-container {
width: 300px;
overflow-x: scroll;
display: flex;
flex-direction: column;
align-items:flex-start; /* Change default alignement to avoid the stretch effect*/
}
.item:first-child {
margin-left: 10px;
}
/*.item:last-child {
margin-right: 10px;
} Not needed since all the elements already have margin-right */
<div class='crop-container'>
<div class='list-container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<div class='list-container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)