Using flexbox, image overflow throughout container

Question

How to make my imgs not to overflow outside its container <div class="display"> and perfectly make a square/box?

It should've work for flexbox.

As you can see, this snippets resulting 3 images with 1 outside which not properly a box.

.display {
  min-width: 500px;
  max-width: 500px;
}

.scenery {
  display: flex;
  flex-direction: column;
}

.scenery_1 {
  display: flex;
}

.scenery_2 {
  display: flex;
}

<div class="display">
<div class="scenery">
  <div class="scenery_1">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
  </div>
  <div class="scenery_2">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
  </div>
</div>
</div>

yea, I've put a red border in `display` and all images fit inside — dippas, Jun 01 '17 at 12:16
there are 5 images, which 2 in first row and 3 in second row. I want to compress them to a box shape. — bidipeppercrap, Jun 01 '17 at 12:16
lol, I use chrome, why the hell it didn't work for chrome :( — bidipeppercrap, Jun 01 '17 at 12:20
There seem to be two issues you want to resolve: (1) the overflow, and (2) the aspect ratio. The overflow solution is simple: Add `min-width: 0` to each `img`, and `min-height: 0` to their parent containers. https://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Jun 01 '17 at 12:42

score 0 · Accepted Answer · answered Jun 01 '17 at 12:28

I'm not sure why you're using display: flex, but this works:

.display {
  min-width: 500px;
  max-width: 100%;
  display: block; /* Add this, remove everything else*/
}

<div class="display">
  <div class="scenery">
    <div class="scenery_1">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    </div>
    <div class="scenery_2">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    </div>
  </div>
</div>

lol flexbox is more professional. but anyway thanks. I won't use any other else that don't use flexbox tho. :( — bidipeppercrap, Jun 01 '17 at 12:34
It works but... As the title say "Flexbox" lol, anyway thanks. just going to use background-image instead. — bidipeppercrap, Jun 01 '17 at 12:50
I can't do that right at this time. Doesn't have enough reputation to vote :( — bidipeppercrap, Jun 01 '17 at 12:55

Using flexbox, image overflow throughout container

1 Answers1