Более узкий DIV при переполнении внутри DIV

Question

Я сделал переполнение DIV (с 1/4 размера DIV), чтобы получить хороший эффект и получить немного места. Однако родительский DIV по-прежнему имеет одинаковую ширину, когда эти DIV находятся рядом друг с другом.

When I try to make parent DIV smaller, last picture is moved to 2nd line.

#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;
}

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

Answer 1

Проблема заключалась в использовании этого левого края для позиционирования, поскольку это может нарушить поток контейнера. Здесь я удалил это и вместо inline-block использовал inline-flex и justify-content: center.

Вот HTML:

<div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13;">
     <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;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12;">
     <img  src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div>

И CSS:

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

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

Answer 2

Проблема в том, что когда вы используете, например, left: -8px для сдвига ваших элементов, он перемещает элемент относительно того места, где он был, но контейнер ведет себя так, как если бы элемент находился в исходном положении - так что вы все равно получите перекомпоновку, если контейнер слишком узкий.

Вы должны выглядеть так, как будто вы используете display:flex для этого типа макета. Таким образом, вы можете либо объединить свои изображения (по умолчанию), либо автоматически распределить их, используя justify-content:space-between.

Codepen здесь