重叠孩子而不是溢出答案

【问题标题】：Overlap children rather than overflow重叠孩子而不是溢出
【发布时间】：2017-10-23 16:14:36
【问题描述】：

我在一个尺寸有限的容器中有许多固定尺寸的物品。如果子项太多，我希望它们开始重叠（最右边），而不是溢出或包裹。

这可以通过仅设置容器和子元素本身的样式来完成，而不需要 JavaScript 或特殊元素吗？

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

想要的效果是这样，但没有额外的包装 divs 并且必须提前知道基本项目的宽度（.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>

【问题讨论】：

stackoverflow.com/q/43919067/3597276
好吧，我猜如果 CSS/HTML 不能做到这一点，那么像这样的 JS 解决方案是一种选择。如果有一个简单的 CSS 解决方案 id 当然更喜欢那个。
我使用 CSS3 网格布局发布了另一个帖子的解决方案，由于提问者不感兴趣，我删除了该解决方案。但如果它对您有帮助（纯 CSS），请提供以下概念：jsfiddle.net/agcxxtxa/1

标签： html css

【解决方案1】：

您可以使用 z-index，因此最右边的元素具有最大的和最左边的最低 z-index。这不是动态解决方案，但可能会有所帮助。

【讨论】：

您的意思是仍然使用绝对定位？这基本上就是我现在所拥有的，但是如何在没有完整 JS 布局的情况下动态调整包装器的大小（在这种情况下，我想我可以完全按照需要定位它们）？
您希望包装器根据内部元素的宽度获取宽度？
理想情况下，就像它们是 display: inline-block 或 flex: 0 0 auto，但具有重叠溢出行为（可能像 flex-shrink 一样分布/定位，但实际上并没有使元素更小）