Is there any way to let the user know that not all content fits in a flex container?
Any icons, signs, texts etc. Like text-overflow: ellipsis;
which can be set for plain text.
.list-panel {
display: flex;
overflow-x: clip;
width: 300px; /* <<----- */
gap: 8px;
padding: 10px;
background: skyblue;
}
.item {
background: lightcyan;
}
<div class="list-panel">
<span class="item">111111111111</span>
<span class="item">222222222222</span>
<span class="item">333333333333</span>
<span class="item">444444444444</span>
<span class="item">555555555555</span>
<span class="item">666666666666</span>
</div>