Flex item div's are wrapping images in a flexbox, and these divs keep overflowing the flexbox

user_19635380 0
Viewed 63

I have 8 images wrapped in divs which need to be contained within a flexbox. They are constantly overflowing the flexbox. I have tried:

  • min-width: 0; / min-height: 0;
  • removing the divs from around the images
  • giving the divs an initial height / width
  • giving the images an initial height / width
  • switching from flex-flow: row wrap to column wrap
  • adding to the CSS: initialContainer::after{contents: ""; flex-basis: 150px;}
  • setting a specific pixel flex-basis
  • adding/removing flex-shrink / flex-grow

Basically, anything you can find on the web, I have tried, it's been 6 hours so far of trying this.

The primary point of overflow is when it switches from 2 columns down to 1 column: the images maintain the same size when that switch happens, and the combined heights of the images at that size are greater than the flexbox height, but the items don't then shrink further in response until the width of the screen is reduced.

The same happens with column wrap, but instead of overflowing below it overflows to the side.

HTML:

.initialContainer{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  height: 95%;
  padding-top: 7%;
}

.intitialElem{
/*color&border are for debugging purposes*/
  background-color: deeppink;
  border:3px solid black;
  width: 100px;
  max-height: 100px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.intitialElem > img{
  max-width:100%;
  height: auto;
  object-fit: contain;
}
<div class="initialContainer">
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?cat">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?dog">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?frog">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?apple">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?pear">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?orange">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?car">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?rocket">
  </div>
</div>

flexbox css html
2 Answers

It is not clear what exactly the problem is from your description. But I suspect that the problem is with the following CSS line max-height: 100px; Before removing this line, I noticed that the images I originally used (which were 200x200) did overflow their borders.

Anyway, it would be useful to know the size of your images.

.initialContainer{
  border:3px solid blue;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  height: 95%;
  padding-top: 7%;
 }

.intitialElem{
/*color&border are for debugging purposes*/
  background-color: deeppink;
  border:3px solid black;
  flex: 1 1 auto;
}

.intitialElem > img{
  object-fit: contain;
}
<div class="initialContainer">
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?cat">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?dog">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?frog">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?apple">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?pear">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?orange">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?car">
  </div>
  <div class="intitialElem">
    <img src="https://source.unsplash.com/random/200x200/?rocket">
  </div>
</div>

user_185953210

It's happening because you used flex: 1 1 auto.

Try to remove it.

user_52208670
Related