I am trying to add a marquee to my HTML dynamically. This is the function I have created

                var element = document.getElementById('overflow');
                var parentElement = document.getElementById('countheader');
                if (element) {
                    var overflow = isElementOverflowing(element, parentElement);
                    if (overflow && !element.classList.contains('marquee')) {
                        element.className += "marquee";
                    } else if (!overflow) {
                        element.classList.remove('marquee');
                    }
                }

function isElementOverflowing(element, parentElement) {
        return parentElement.clientWidth <= element.clientWidth;
    }

In the CSS file I have the styling as

 #countheader{   
        background-color: #e9df8b;
        width: fit-content;
        white-space: nowrap;
        min-width: 100%;
        overflow: hidden;
        padding-left: 11px!important;
        max-width: 1266px!important;
    }
    #overflow{
        max-width: 1266px!important;
    }

#HTML

 <div class="page-content" style="background-color: {{isDarkMode ? '#000000' : '#FFFFFF'}}">

                    <!-- Item Count Card-->

                    <div class="order-card item-card"
                         ng-if="currentStation.get('enableItemCount') && viewTitle === 'Open Orders' && currentStation.get('itemCountFilters').length > 0 && itemsCount.length > 0">
                       
                        <div class="card-header"  id="countheader">
                                <div id="overflow">
                                    <b class="item-heading">Total Count</b>
                                    <span  class="item-count" ng-repeat="item in itemsCount">{{item.name}}({{item.quantity}})</span>
                                </div>
                        </div> 
                    </div>
                    <!-- Item Count Card -->

But in some cases, I am seeing that the text overflows the parent div in the UI but in the function isOverflowing it is still showing parent element width greater and so the marquee does not gets added in the class. Is there a better way to find the height of the parent div and child div content?