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>

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>

• html
• css

• Basically, no. CSS can't detect overflow as such. – Paulie_D Commented 11 hours ago
• 1 @Paulie_D actually it can: css-tip/overflow-detection (and in the future it will be even more simple: drafts.csswg./css-conditional-5/#scrollable) – Temani Afif Commented 11 hours ago
• Sorry, I should have said "CSS can't detect possible overflow". It can do something when overflow occurs but it can't do anything until there is overflow...right? There is no will-overflow property. ☺ – Paulie_D Commented 11 hours ago
• In the meantime... sounds like you have an answer there – Paulie_D Commented 11 hours ago
• An idea, en passant, maybe one could style the scrollbar so that it shows whatever you wish, and disable it so that it acts as clip: codepen.io/_-0-_/pen/zxYbOvQ Unfortunately I couldn't find a way to move it up... – Kaiido Commented 5 hours ago

1 Answer 1

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>