Как у меня меньшие div внутри большего дисплея div, только когда есть место внутри указанного большего div?

Question

Я создаю веб-сайт и пытаюсь получить набор div с одним и тем же классом (.ThumbDiv), чтобы автоматически знать, сколько из них может поместиться в родительском div (.RedBar). Я установил родительский div .RedBar (.ThumbsBox) для изменения размера в браузере с использованием%, .RedBar равным 100% ширины .ThumbsBox, .ThumbDivs для встроенного блока и переполнения для .ThumbsBox скрыто. Это сработало, но теперь мне нужна функция наведения, чтобы увеличить размер каждого .ThumbDiv после размера .ThumbsBox, поэтому я планировал удалить overflow:hidden для родителя и просто использовать javascript для добавления и удаления .ThumbDivs с событием onresize, редактирующим отображение по мере необходимости, но я новичок в javascript и не знаю точно, как сформулирован синтаксис или что делает большинство функций.

Я пытался использовать переменную вместо «this», но это не имеет значения.

function CheckThumbsNumber()
{
    //var thisO = this;
    var numOfThumbs = Math.floor(this.style.width / document.getElementByClassName("ThumbDiv").style.width);
    var i = 0;

    for(i = 0; i < numOfThumbs; i++)
    {
        this.children[0].children[i].style.display = "inline-block";
    }

}

//My HTML Code

<div class="ThumbsBox" onresize="CheckThumbsNumber()">
    <div class="RedBar">
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
        <div class="ThumbDiv">...</div>
    </div>
</div>

Я использую notepad ++ и редактор html внутри Chrome, оба говорят, что сообщений об ошибках нет, но ThumbDivs не отображаются

UPDATE

Вот мой исправленный и функциональный способ использования javascript для размещения меньших div внутри большего при изменении размера браузера и без использования overflow:hidden:

//Checks if any red bars exist on the page.
if (document.getElementsByClassName("RedBar").length > 0) {
  window.onload = CheckThumbsNumber();
  window.addEventListener('resize', CheckThumbsNumber /*Calls the function WITHOUT parentheses, I tried adding the event to each of my redbars individually but when I put "this" as the parameter, it only recognized it as the window element, as the "resize" event can only be added to the window element*/ );

  function CheckThumbsNumber() {
    var rBarList = document.getElementsByClassName("RedBar"); /*Gets every redbar on the page*/
    var tDivList = document.getElementsByClassName("ThumbDiv"); /*Gets every Thumbnail div on the page but only so I can get the width of one*/

    var rBarWidth = rBarList[0].offsetWidth; /*There are many different ways to get the width of an element, figure out the one that best helps with what you need to do*/
    var tDivWidth = document.getElementsByClassName("ThumbDiv")[0].offsetWidth;

    var numOfThumbs = Math.floor((rBarWidth - 30) / tDivWidth); /*Determines how many red boxes can fit*/
    var i = 0;
    //For loop goes through the list of ThumbDivs inside each RedBar and only turns off the ones that go past the width of the RedBar
    for (i = 0; i < rBarList.length; i++) {
      var rTDivList = rBarList[i].getElementsByClassName("ThumbDiv");
      var sI = 0;
      for (sI = 0; sI < rTDivList.length; sI++) {
        if (sI < numOfThumbs) {
          rTDivList[sI].style.display = "inline-block";
        }
        if (sI >= numOfThumbs) {
          rTDivList[(sI)].style.display = "none";
        }
      }
    }
  }
}

.ContentBox {
  border-style: solid;
  border-color: #262626;
  border-width: 5px;
  border-radius: 5px;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

#ContentHeader {
  text-align: left;
  width: 100%;
}

#ContentHeader h1 {
  color: black;
}

.ThumbsBox {
  box-shadow: 0 0 20px 1px black;
  border-style: solid;
  border-color: blue;
  border-width: 2px;
  border-radius: 15px;
  display: inline-block;
  width: 99%;
  height: 190px;
  margin-bottom: 10px;
}

.RedBar {
  margin-top: 44px;
  background-color: red;
  width: 100%;
  height: 40px;
}

.ThumbDiv {
  background-color: red;
  display: inline-block;
  position: relative;
  bottom: 30px;
  width: 142px;
  height: 142px;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <link href="HomePageStyleSheet.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="ContentBox">
    <div id="ContentHeader">
      <h1>Content Box</h1>
    </div>
    <div class="ThumbsBox">
      <div class="RedBar">
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
      </div>
    </div>
    <div class="ThumbsBox">
      <div class="RedBar">
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
        <div class="ThumbDiv"></div>
      </div>
    </div>
  </div>
  <script src="HomePageJSFile.js"></script>
  <!--The script must be at the bottom of the <body> or it won't be able to reference any code-->
</body>

</html>