div not being contained by it's parent height-CodePudding

I'm trying to make a dynamic (number of columns/rows might change) grid of images that always gets resized to a percentage of the viewport's size.

The width limit works fine, but the grid goes over the height limit. How can I fix this? I'd like the images to have no spaces between them (both on the y and x axis) no matter their size as well.

https://jsfiddle.net/od3tyepr/

* {
  margin: 0;
  border: 0;
  padding-right: 0;
  padding-left: 0;
  padding: 0;
}

#_parent {
  display: flex;
  height: 100vh;
  width: 50vw;
  align-content: center;
  align-items: center;
  margin: auto;
}

#_grid {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 80%;
  width: 100%;
}

#_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

._img {
  max-width: 100%;
  max-height: 100%;
  width: calc(100% / 3);
  object-fit: contain;
}

<div id="root">
  <div id="_parent">
    <div id="_grid">
      <div id="_row">
        <img id="" src="//placeimg.com/600/400?text=1" >
        <img id="" src="//placeimg.com/600/400?text=2" >
        <img id="" src="//placeimg.com/600/400?text=3" >
        <img id="" src="//placeimg.com/600/400?text=4" >
        <img id="" src="//placeimg.com/600/400?text=5" >
        <img id="" src="//placeimg.com/600/400?text=6" >
        <img id="" src="//placeimg.com/600/400?text=7" >
        <img id="" src="//placeimg.com/600/400?text=8" >
        <img id="" src="//placeimg.com/600/400?text=9" >
        <img id="" src="//placeimg.com/600/400?text=10" >
        <img id="" src="//placeimg.com/600/400?text=11" >
        <img id="" src="//placeimg.com/600/400?text=12" >
        <img id="" src="//placeimg.com/600/400?text=13" >
        <img id="" src="//placeimg.com/600/400?text=14" >
        <img id="" src="//placeimg.com/600/400?text=15" >
      </div>
    </div>
  </div>
</div>

As you can see, the image doesn't get resized to fit the height and instead there is a lot of scrolling.

CodePudding user response：

CSS grid can do better job here:

#_parent {
  display: flex;
  height: 100vh;
  width: 50vw;
  place-items: center;
  justify-content: center;
  margin: auto;
}

#_grid {
  display: flex;
  min-height: 0;
  height: 80%;
}

#_row {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
}

._img {
  min-height: 100%;
  height: 0;
  width: 100%;
  object-fit: contain;
}

body {
  margin: 0;
}

<div id="root">
  <div id="_parent">
    <div id="_grid">
      <div id="_row">
        <img id="" src="//placeimg.com/600/400?text=1" >
        <img id="" src="//placeimg.com/600/400?text=2" >
        <img id="" src="//placeimg.com/600/400?text=3" >
        <img id="" src="//placeimg.com/600/400?text=4" >
        <img id="" src="//placeimg.com/600/400?text=5" >
        <img id="" src="//placeimg.com/600/400?text=6" >
        <img id="" src="//placeimg.com/600/400?text=7" >
        <img id="" src="//placeimg.com/600/400?text=8" >
        <img id="" src="//placeimg.com/600/400?text=9" >
        <img id="" src="//placeimg.com/600/400?text=10" >
        <img id="" src="//placeimg.com/600/400?text=11" >
        <img id="" src="//placeimg.com/600/400?text=12" >
        <img id="" src="//placeimg.com/600/400?text=13" >
        <img id="" src="//placeimg.com/600/400?text=14" >
        <img id="" src="//placeimg.com/600/400?text=15" >
      </div>
    </div>
  </div>
</div>

CodePudding user response：

* {
  margin: 0;
  border: 0;
  padding-right: 0;
  padding-left: 0;
  padding: 0;
}

#_parent {
  height: 100vh;
  width: 50vw;
  margin: auto;
overflow: auto;
}

#_grid {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

#_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

._img {
  max-width: 100%;
  max-height: 100%;
  width: calc(100% / 3);
  object-fit: contain;
}

<div id="root">
  <div id="_parent">
    <div id="_grid">
      <div id="_row">
        <img id="" src="//placeimg.com/600/400?text=1" >
        <img id="" src="//placeimg.com/600/400?text=2" >
        <img id="" src="//placeimg.com/600/400?text=3" >
        <img id="" src="//placeimg.com/600/400?text=4" >
        <img id="" src="//placeimg.com/600/400?text=5" >
        <img id="" src="//placeimg.com/600/400?text=6" >
        <img id="" src="//placeimg.com/600/400?text=7" >
        <img id="" src="//placeimg.com/600/400?text=8" >
        <img id="" src="//placeimg.com/600/400?text=9" >
        <img id="" src="//placeimg.com/600/400?text=10" >
        <img id="" src="//placeimg.com/600/400?text=11" >
        <img id="" src="//placeimg.com/600/400?text=12" >
        <img id="" src="//placeimg.com/600/400?text=13" >
        <img id="" src="//placeimg.com/600/400?text=14" >
        <img id="" src="//placeimg.com/600/400?text=15" >
      </div>
    </div>
  </div>
</div>

I think it woks for you

CodePudding user response：

you can fix it by adding the attribute "overflow: auto;" to the parent element (_parent).