CODEWITHSUNDEEP
htmlcssflexbox
J B
J B

Reputation: 9

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

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

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>

Upvotes: 0

Views: 80

Answers (2)

PeterJames
PeterJames

Reputation: 1353

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>

Upvotes: 1

Tonielton Mota
Tonielton Mota

Reputation: 141

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

Try to remove it.

Upvotes: 0

Related Questions