Partially overlap elements using CSS - html

Question

I'd like to partially overlap multiple HTML elements - say DIVs - as in the below image. The black-bordered rectangles (Hanafuda cards) represent the elements I want to overlap.
With Javascript I'm sure I could come up with something, but I'd like to know if there's a pure CSS solution. I considered relative positioning but the problem is that each card needs a bigger and bigger offset along the x-axis.
Ideally I'd like the degree of overlap to depend on how much space there is, so that the elements crowd together more when cramped, but that's secondary and I don't mind using JS to accomplish it.

Answer 1

You can achieve that using flex, making all cards except the last one adjust to the remaining space
Here is a fiddle of the below:
.container {
display: flex;
width: 300px;
}
.card-container {
flex: 1 0 0;
overflow-x: hidden;
}
.card-container:last-child {
flex: 0 0 auto;
}
.card {
background: linear-gradient(to right, #ccc 0%, #444 100%);
width: 100px;
height: 150px;
}
<div class="container">
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
</div>

Answer 2

This can also be achieved using display: table, which currently enjoys greater browser compatibility over the newer, and wonderful, flex specification.
Compatibility: IE8+ and all modern browsers.
The outer div is given display: table
Each image is wrapped in a div with display: table-cell
table-layout: fixed allows the "cells" to overlap
The outer div can be kept flexible to allow the images to overlap more / less depending on the space they left with
Full Example
.cards {
display: table;
table-layout: fixed;
width: 50%;
max-width: 700px;
}
.cards > div {
display: table-cell;
width: 100px;
}
.cards > div > img {
display: block;
}
<div class="cards">
<div><img src="http://www.placehold.it/200x300" /></div>
<div><img src="http://www.placehold.it/200x300/FF0000" /></div>
<div><img src="http://www.placehold.it/200x300" /></div>
<div><img src="http://www.placehold.it/200x300/FF0000" /></div>
</div>

Answer 3

I found that the simplest solution was to use float: left combined with a negative right-margin:
.card {
--card-width: 100px;
margin-right: calc(25px - var(--card-width));
float: left;
width: var(--card-width);
height: calc(var(--card-width) * 1.5);
border: 1px solid black;
background: white;
}
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>