Flex box: Flex items are div's wrapping images, and it keeps overflowing the flexbox-CodePudding

I have 8 images wrapped in divs which need to be contained within a flexbox. My issue is that they always overflow the box. I have tried:

min-width: 0; /min-height: 0;
removing the div's from around the images
giving the divs an initial height/width
giving the images an initial h/w
switching from flex-flow: row wrap to column wrap
adding into 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 images' combined heights at that size surpass 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. Thanks!

HTML:

<div >
                <div >
                  <img src="../img/gyeonggiProvince.png">
                </div>
                <div >
                  <img src="../img/gangwonProvince.png">
                </div>
                <div >
                  <img src="../img/gyeongsangProvince.png">
                </div>
                <div >
                  <img src="../img/jeollaProvince.png">
                </div>
                <div >
                  <img src="../img/chungcheongProvince.png">
                </div>
                <div >
                  <img src="../img/pyeonganProvince.png">
                </div>
                <div >
                  <img src="../img/hamgyeongProvince.png">
                </div>
                <div >
                  <img src="../img/hwanghaeProvince.png">
                </div>
              </div>

CSS:

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

CodePudding user response：

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 >
  <div >
    <img src="https://source.unsplash.com/random/100x100/?cat">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?dog">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?frog">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?apple">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?pear">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?orange">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?car">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/100x100/?rocket">
  </div>
</div>

CodePudding user response：

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

Try to remove it.