The item-outer-container element has a smaller width than its child div, so why doesn’t a horizontal scrollbar appear?
https://jsfiddle.net/v32h5ko7/
#container {
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%) translateX(50%);
padding: 20px;
border: solid 1px;
border-radius: 100px;
width: 90%;
display: flex;
align-items: center;
&>* {
width: calc(100%/3);
}
}
span {
height: 40px;
border-radius: 20px;
}
#blu-button-container {
flex-shrink: 1;
span {
display: block;
width: 150px;
background-color: blue;
}
}
#title {
min-width: 200px;
text-align: center;
font-weight: bold;
}
#item-outer-container {
overflow: auto;
height: 50px;
flex-shrink: 1;
display: flex;
align-items: center;
justify-content: end;
div {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: end;
gap: 5px;
span {
width: 40px;
background-color: red;
}
}
}<div id=container>
<div id=blu-button-container>
<span></span>
</div>
<div id=title>TITLE</div>
<div id=item-outer-container>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>0
You need one more div wrapper inside #item-outer-container in order to dissociate container and child width.
https://jsfiddle.net/rdj29amL/#&togetherjs=zlfuJRNyqE
<div id=item-outer-container>
<div width='100%'>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
The problem is justify-content: end;. Remove it and it’s functionality will be replaced with &>:first-child { margin-top: auto !important;}.
#item-outer-container {
overflow-x: auto;
height: 50px;
flex-shrink: 1;
display: flex;
align-items: center;
& > :first-child {
margin-top: auto !important;
}
...
}
This solution came up with some help from this answer: Use justify-content: flex-end and to have vertical scrollbar
The discussion is pointing to an old bug
3