オーバーフローではなくオーバラップする子供

Question

限られたサイズのコンテナにいくつかの固定サイズのアイテムがあります。子アイテムが多すぎる場合は、あふれたり折り返したりするのではなく、オーバーラップを開始することをおすすめします。

これは、JavaScriptや特別な要素なしで、コンテナと子要素そのものをスタイリングするだけで可能ですか？

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

所望の効果はこれで、余分な包装divsと前もって基本アイテム幅（.items > divオン幅）を知ることなく。あなたがzインデックスを使用することができ、その要素が多くて、右、左、最低のzインデックスへの最大の、最もしています。

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

Answer 1

動的な解決策ではありませんが、参考になるかもしれません。