Overlap children rather than overflow

Question

I have a number of fixed-size items in a container of limited size. If there are too many child items, I would like them to start overlapping (right right most on top), rather than overflowing or wrapping.

Can this be done by just styling the the container and child elements themselves, without JavaScript or special elements?

<div class="items">
  <div>A</div>
  <div>B</div>
</div>

The desired effect is this, but without the extra wrapper divs and having to know the base item width ahead of time (the width on .items > div).

.items {
  background: #FFB600;
  display: flex;
  flex-direction: row;
  left: 5px;
  bottom: 5px;
  width: 90px;
  padding: 8px;
  margin: 10px;
}
.items > div {
  flex: 0 1 20px;/*16px icon + 4px spacing*/
  height: 16px;
  position: relative;
}
.items > div > div {
  position: absolute;
  width: 16px; 
  height: 16px;
  opacity: 0.9;
}
/*Give each a different colour / apperance*/
.items > div:nth-child(1) > div {
  background: #0026FF;
}
.items > div:nth-child(2) > div {
  background: #0094FF;
}
.items > div:nth-child(3) > div {
  background: #004A7F;
}
.items > div:nth-child(4) > div {
  background: #00137F;
}
.items > div:nth-child(5) > div {
  background: #7F92FF;
}
.items > div:nth-child(6) > div {
  background: #7FC9FF;
}
.items > div:nth-child(7) > div {
  background: #007F7F;
}
.items > div:nth-child(8) > div {
  background: #00FFFF;
}

<div class="items">
  <div>
    <div></div>
  </div>
</div>
<div class="items"><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
 <div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
 <div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
 <div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>

Well I guess if CSS/HTML cant do it, a JS solution like that is an option. If there is a plain CSS solution id certainly prefer that though. — Fire Lancer, May 23 '17 at 21:18
I had posted a solution to that other post, using CSS3 Grid Layout, which I deleted because the asker wasn't interested. But here's the concept in case it helps you (pure CSS): https://jsfiddle.net/agcxxtxa/1/ — Michael Benjamin, May 23 '17 at 21:22

score 0 · Answer 1 · answered May 23 '17 at 16:30

0

You could use z-index, so the element at the most right has the greatest and most to the left lowest z-index. It is not dynamic solution but might be helpful.

answered May 23 '17 at 16:30

wired

438
4
12

You mean still with absolute positioning? Thats basically what I have now, but how can I size the wrapper dynamically without a full JS layout (in which case I guess I can just position them exactly as desired)? – Fire Lancer May 23 '17 at 21:16
You want to wraper to take width based on widths from elements inside? – wired May 24 '17 at 07:33
Ideally, so like if they were `display: inline-block`, or `flex: 0 0 auto`, but with an overlap overflow behaviour (possibly distributed/positioned like a `flex-shrink`, but without actually making the element smaller) – Fire Lancer May 24 '17 at 10:15

Overlap children rather than overflow

1 Answers1