Narrower DIV when inside DIVs overflow

Question

I made a DIVs overflow (with 1/4 of the DIV size) to make a nice effect and gain a little bit of space. However, parent DIV is still same width when the DIVs were next to eachother.

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

Is there a way I could make parent DIV smaller to match the images when they are placed onto eachother? As pictures are 24x24px, they should take maximum of 78px instead of 96px (on JSbin it somehow got blank spaces in between of images, so it is wider than it should).

CODE

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

Никола Тошић · Accepted Answer

The problem was in using that left for positioning, as it can mess the flow of container. Here I removed that and instead of inline-block used inline-flex and justify-content: center.

Here is the HTML:

And the 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;
}

Narrower DIV when inside DIVs overflow

Answers (2)

Related Questions