内部DIV溢出时缩小DIV

我进行了DIV溢出(具有DIV大小的1/4),以取得不错的效果并获得一点空间。 但是,当DIV彼此相邻时,父DIV的宽度仍然相同。

enter image description here

当我尝试缩小父级DIV时,最后一张图片移至第二行。

enter image description here

有什么方法可以使父DIV较小以匹配将它们放置在彼此上的图像吗? 由于图片为24x24像素,因此最多应占用78像素而不是96像素(在JSbin上,图片之间存在空白,因此它比应该的宽)。

的HTML

<div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10; left: 0px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11; left: -8px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12; left: -16px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13; left: -24px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div><div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10; left: 0px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11; left: 0px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12; left: 0px;">
     <img  src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13; left: 0px;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div>

的CSS

#assignee-img-container {
    display: inline-block;
    float: left;
    margin: px auto 0px auto;
    line-height: normal;
    width: 108px;
    border: 1px solid black;
    height: 24px;
}

.assignee-img {
    position: relative;
    display: inline-block;
    overflow: visible;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    border: none;
}