Flexbox item does not adjust to image height/is slightly larger

Question

I am trying to fit images inside flexbox items and want the outer div to adjust to the height of the image height. But somehow, the outer div is slightly heigher than the image and I don't know what is causing that.

My HTML:

<div class="flex-container">
    <div class="item">

    </div>
    <div class="item">
      <img class="img-responsive" src="http://via.placeholder.com/1920x1080">
    </div>
    <div class="item">
      <img class="img-responsive" src="http://via.placeholder.com/1920x1080">
    </div>
    <div class="item">

    </div>
</div>

The CSS:

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: 50%;
}
.img-responsive {
    width: 100%;
    height: auto;
}

And the result:

Example

The images should touch at the edges but instead there's a gap. I already tried to set the margin and padding to 0 without success.

It would be great if someone could explain what is causing that.

Thanks!

Just add `vertical-align: bottom` to the images: https://jsfiddle.net/hz36o7r0/1/ — Michael Benjamin, Jun 15 '18 at 20:31
That does the trick. But could you explain why there's a gap? — pete, Jun 15 '18 at 20:34
It's explained in my answer in the duplicate. If you're still unclear after reading it, let me know. — Michael Benjamin, Jun 15 '18 at 20:35
Thanks, understood. Sorry for the duplicate. Didn't find the duplicated question. — pete, Jun 15 '18 at 20:37

score 1 · Answer 1 · answered Jun 15 '18 at 20:31

1

can try to add that css:

.item {
  width: 50%;
  line-height: 0;
}

that can solve your problem

answered Jun 15 '18 at 20:31

Pasquale De Lucia

190
1
1
12

Flexbox item does not adjust to image height/is slightly larger

1 Answers1