I don't know why my javascript code isn't working

I'm building a website and trying to get a set of divs with the same class (.ThumbDiv) to automatically know how many can fit inside a parent div (.RedBar). I've set the parent div of .RedBar (.ThumbsBox) to resize with the browser using a %, .RedBar to be 100% the width of .ThumbsBox, the .ThumbDivs to inline-block and the overflow for .ThumbsBox to hidden. It worked, but I now need a hover function to expand the size of each .ThumbDiv past the size of the .ThumbsBox so I planned to remove the overflow:hidden for the parent and just use javascript to add and remove .ThumbDivs with the onresize event editing the display as necessary, but I am new to javascript and don't know exactly how the syntax is worded or what most of the functions do.

I've tried using a variable instead of "this" but it doesn't make a difference.

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>

I'm using notepad++ and the html editor inside Chrome, both say there are no error messages but no ThumbDivs are displayed