CSS: How to let the user know that not all content fits in a flex container

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>

Solution

A hacky idea to use with caution (or to not use at all):

.list-panel {
  display: flex;
  overflow: hidden;
  width: 300px;
  gap: 8px;
  border: 10px solid #0000;
  background: skyblue;
  margin: 10px;
}

.item {
  background: lightcyan;
}

.list-panel:after {
  content:" ... ";
  background: red;
  padding-inline: 5px; 
  position: sticky;
  right: 0;
}
/* the last item will have a big overflow coloration 
   that will hide the pseudo element but the pseudo element
   will be visible if we have a lot of items because
   the last item is no more visible
*/
.item:last-child {
  z-index: 1;
  border-image: 
    conic-gradient(skyblue 0 0) 
    0 1 0 0/0 100vw 0 0/0 100vw 0 0;
}

<div class="list-panel">
  <span class="item">111111111111</span>
  <span class="item">666666666666</span>
</div>

<div class="list-panel">
  <span class="item">111111111111</span>
  <span class="item">666666666666</span>
  <span class="item">666666666666</span>
</div>

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