JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parentDivStyle" onclick="displayCoords(this);">
<div class="childDivStyle">1</div>
<div class="childDivStyle">2</div>
<div class="childDivStyle">3</div>
<div class="childDivStyle">4</div>
<div class="childDivStyle">5</div>
</div>

CSS

.parentDivStyle{
overflow:hidden;
width:300px;
height:50px;
position:absolute;
background:#ccc;
    float:left; 
}

.childDivStyle{
width:100px;
height:50px;
position:relative;
float:left; 
background:red;
border: 1px solid black;   
}

JavaScript

displayCoords = function(element) {
    var rect = element.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);   
    
    var childElements = element.children;
    for(i = 0; i < childElements.length; i++)
    {
        childRect = childElements[i].getBoundingClientRect();
        console.log(childRect.top, childRect.right, childRect.bottom, childRect.left);  
        if(childRect.top >=  rect.bottom)
            console.log("not visible -- off the bottom of element");
        else if(childRect.left >= rect.right)
            console.log("not visible -- off the right of element");
        else if(childRect.bottom <= rect.top)
            console.log("not visible -- off the top of element");
        else if(childRect.right <= rect.left)
            console.log("not visible -- off the left of element");
    }
    
}