how to check which children overflown the parent's div

Question

first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.

Example: Lets say i have parent div and 5 child divs of images with same class name.

Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.

I tried:

To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.

All i want is:

Figure it out how to check which children overflown the parent's div. I don't know if this needs javascript or only html css... i'm only learning.

Thanks.

Edit

The code i did:

// clicking see more to show the rest of images

folderSeeMore.onclick = function() {
  if (folderSeeMore.innerHTML == "See more") {
    $(centerViewMid).css("overflow", "visible");
    $(centerViewMid).css("height", "auto");
    folderSeeMore.innerHTML = "See less";
    wait = 1;
  } else {
    $(centerViewMid).css("overflow", "hidden");
    $(centerViewMid).css("height", "150");
    folderSeeMore.innerHTML = "See more";
  }
}

.center_view_middle {
  border-radius: 10px;
  height: 150px;
  margin-bottom: 15px;
  overflow: hidden;
}

.center_view_middle_box {
  display: inline-block;
  position: relative;
  margin-right: 15px;
  width: 130px;
  height: 150px;
  border-radius: 10px;
  text-align: center;
}

See more

how to check which children overflown the parent's div

0 Answers