как проверить, какие дети переполнили родительский div

Question

при первой публикации я пытаюсь создать адаптивный веб-сайт, где пользователи могут добавлять / загружать изображения на веб-сайт, но я не хочу, чтобы страница заполнялась изображениями, я просто хочу, чтобы страница иметь одну строку каждой группы изображений, добавленных пользователем, и если пользователь нажимает кнопку «видеть больше», он расширяется, чтобы показать больше изображений в этой группе.

Пример: Позволяет сказать у меня есть parent div и 5 child div изображений с тем же именем класса.

<div class="parent">
   <div class"child"></div>
   <div class"child"></div>
   <div class"child"></div>
   <div class"child"></div>
   <div class"child"></div>
</div>

Теперь страница веб-сайта может содержать только 5 изображений в строке, но если Пользователь добавил больше изображений, он переходит к следующему ряду. Кроме того, если ширина страницы меньше, то страница будет содержать менее 5 изображений, в зависимости от доступного пространства.

Я пытался:

Проверить внутри все oop всех дочерних элементов div, чтобы увидеть, переполнили ли они родительский элемент, а затем переместить их в скрытый класс, но безуспешно, я не могу понять, как проверить, какие дочерние элементы переполнили div родительского элемента.

Все, что я хочу, это:

Поймите, как проверить, какие дети переполнили родительский div. Я не знаю, нужно ли это javascript или только html css ... я только учусь.

Спасибо.

Редактировать

Код, который я сделал:

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

<h6 class="folder_seeMore"><u>See more</u></h6>

<div class="center_view_middle">
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
  <div class="center_view_middle_box">
    <div class="middle_box_img"></div>
  </div>
</div>