Can I stack elements with overlap using pure CSS?

Question

Is it possible to position unknown number of elements in a container so that it appears to be stacked when that container is not big enough? I'm trying to do this with only HTML and CSS.

Here's what it looks like if the parent is bigger than the children.

Here's what I'm trying to accomplish when there are more children occupying the parents (fill color to show stacking order):

Some things I looked at but had no luck with (maybe I'm missing something or just not that good):

1. CSS counter - only works for content property
2. Nesting the children div within each other (like Inception)
3. CSS flexbox - it only wraps or shrinks

Here's kind off what I'm trying to do: http://codepen.io/vickyleong/pen/VaPBYg. Try to resize the window.

NOTE: The children are squares, but stacked with overlap, like cascade

I'm using Sass, but here is my code with just HTML and CSS:

body, * {
  box-sizing: border-box;
  margin: 0;
}

.card {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #FAFAFA;
  border: 1px solid #F4F4F4;
  box-shadow: 0px 1px 3px 1px #DDD;
}

.card-content {
  margin: 1rem;
}

.student-pic-sm {
  width: 100px;
  height: 100px;
}

.round-pic {
  background-color: #AAA;
  border-radius: 50%;
}

.batch-list-item .card-title h2 {
  margin: 1rem 0;
}
.batch-list-item .card-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.batch-list-item .student-pic-list {
  height: 100px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.batch-list-item .round-pic {
  box-sizing: border-box;
  display: inline-block;
  border: 3px solid #333;
  overflow: visible;
}
.batch-list-item .round-pic .round-pic {
  margin-left: 25%;
  margin-top: -3px;
}
.batch-list-item .round-pic:nth-child(2n) {
  background-color: #BBB;
}
.batch-list-item .round-pic:nth-child(3n) {
  background-color: #CCC;
}
.batch-list-item .space-filler {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.batch-list-item .students-count {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8rem;
      -ms-flex: 0 0 8rem;
          flex: 0 0 8rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.batch-list-item .students-count p {
  font-size: 16pt;
}

.student-pic-list {
  position: relative;
}
.student-pic-list > div + div {
  position: absolute;
  left: 4%;
}
.student-pic-list > div + div + div {
  left: 8%;
}
.student-pic-list > div + div + div + div {
  left: 12%;
}
.student-pic-list > div + div + div + div + div {
  left: 16%;
}
.student-pic-list > div + div + div + div + div + div {
  left: 20%;
}
.student-pic-list > div + div + div + div + div + div + div {
  left: 24%;
}
.student-pic-list > div + div + div + div + div + div + div + div {
  left: 28%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div {
  left: 32%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div {
  left: 36%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div {
  left: 40%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div {
  left: 44%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 48%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 52%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 56%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 60%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 64%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 68%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 72%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 76%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 80%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 84%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 88%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 92%;
}
.student-pic-list > 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 {
  left: 0%;
  z-index: -1;
}

<div id="batch-1" class="batch-list-item card">
  <div class="card-title">
    <h2>Pending Batch</h2>
  </div>
  <div class="card-content">
    <div class="student-pic-list">
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
    </div>
    <div class="students-count">
      <p>14 students</p>
    </div>
  </div>
</div>

Answer 1

negative margins except on the first-of-type:

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    background: lavender;
}

#container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    outline: 1px solid hotpink;
}

.inner {
    height: 100px;
    width: 100px;
    margin-left: -50px;   
    -webkit-transition: margin-left 0.3s ease; /* Safari */
    transition:  margin-left 0.3s ease;
    border: 2px dashed black;
    box-sizing: border-box;
    background-color: rgba(255, 0, 255, 0.2);
}

.inner:first-of-type, #container:hover .inner:first-of-type {
    margin-left: 0; 
}

#container:hover .inner {
    margin-left: -30px;  
}

img {
    width: 100px;
    height: 100px;
}

<div id=container>
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div>  
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
</div>