Faking left and right margins for webkit scrollbar? - css

Question

I have a dropdown that needs a scrollbar with left and right margins. I'm using -webkit-scrollbar, but as far as I can tell, it only supports margins along the scroll axis, so I've been approximating horizontal margins with a right margin on the items inside the container, and some right padding on the outer div, as you can see in my code.
However, this creates unsightly extra-wide right padding when the container doesn't have enough items to be scrollable (see the second dropdown in my example). I want the right edge to look the same as all the other edges when there's no scrollbar.
.dropdown {
width: 360px;
padding-right: 10px; /* pseudo-right-margin for scrollbar */
background-color: green;
padding-bottom: 10px;
max-height: 365px;
margin-bottom: 20px;
}
.itemContainer {
max-height: 355px;
overflow-y: auto;
padding-left: 10px;
padding-top: 10px;
}
.item {
background-color: white;
height: 51px;
padding: 10px;
margin-bottom: 10px;
margin-right: 10px; /* pseudo-left-margin for scrollbar */
}
.item:last-of-type {
margin-bottom: 0px;
}
#media screen {
.itemContainer::-webkit-scrollbar {
width: 6px;
border-radius: 2px;
}
.itemContainer::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: black;
border: solid red 10px;
}
.itemContainer::-webkit-scrollbar-track {
margin-top: 10px;
background-color: yellow;
width: 6px;
}
}
<div class="dropdown">
<div class="itemContainer">
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
</div>
</div>
<div class="dropdown">
<div class="itemContainer">
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
</div>
</div>
My only idea for a css-only solution is somehow using an .item:nth-child(5) pseudo-selector, since the dropdown becomes scrollable with 5 or more items, but I don't know what property I would give it.
I already have a javascript solution but I want to do this with just css, if that's possible. (Also, always showing the scrollbar is not an acceptable solution.)

Answer 1

All right. Was not so hard, but unfortunately there is a lot of extra html in my solution. Please tell if need comments and/or explanation of something.
Result is below.
.dropdown {
width: 360px;
background-color: green;
padding-bottom: 10px;
max-height: 365px;
margin-bottom: 20px;
}
.itemContainer {
max-height: 355px;
overflow-y: auto;
padding-left: 10px;
padding-top: 10px;
margin-right: 10px;
}
.itemContainer>div {
display: table;
width: 100%;
}
.item {
display: table-row;
}
.item>div{
display: table-cell;
vertical-align: top;
padding-bottom: 10px;
}
.item:last-child>div {
padding-bottom: 0;
}
.item > div:nth-child(1) {
width: 100%;
}
.item>div:nth-child(1)>div{
background-color: white;
padding: 10px;
height: 51px;
}
.item:nth-child(5) > div:nth-child(2) > div {
width: 10px;
}
#media screen {
.itemContainer::-webkit-scrollbar {
width: 6px;
border-radius: 2px;
}
.itemContainer::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: black;
border: solid red 10px;
}
.itemContainer::-webkit-scrollbar-track {
margin-top: 10px;
background-color: yellow;
width: 6px;
}
}
<div class="dropdown">
<div class="itemContainer"><div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
</div></div>
</div>
<div class="dropdown">
<div class="itemContainer"><div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
</div></div>
</div>
In a few words, I added table layout. When there are more than 4 rows, the second column's width is set to 10px.