My bootstrap 5.0 scrollspy is not scrolling the container in which anchor tags are when the children are scrolled

Question

i have tried all possibilities and could not make the scrollspy work for my particular case. the issue is that the container in which my anchor tags are which point to the children has a fixed height and overflow:auto. now when i scroll the children related to it, the activate.bs.scrollspy gets called but the parent container in which anchor tags are does not scroll. if i make it scroll forcefully, the click event for parent does not work then. any help would be appreciated.

this is the final code i have stopped on as any other solutions did not work:here's the simplified tpl code in opencart:

#all-filters-list {
    position: relative;
    height: 100%; /* Adjust this value according to your layout */
    overflow-y: auto;
}

#all-filters-list .active {
    background:white!important;
    color:#000!important;
    font-weight:500;
}

#all-filters-list .active:before {
    content: "";
    width: 0.2rem;
    height: 100%;
    background: #fb7701;
    display: inline-block;
    position: absolute;
    left: 0;
    top:0;
}

.filter-sort-list li:last-child{
    border:none!important;
}

.scrollspy-filters {
    position: relative;
    height: 300px;
    overflow: auto;
}

.mh-10-rem{
    max-height:10rem!important;
}

.focus-ring-dark{
    box-shadow: 0 0 0 2px #000;
}
.hide-scroll-thumb::-webkit-scrollbar {
    display: none;
}

.disabled {
    opacity: 0.8;
    pointer-events: none;
    cursor: not-allowed;
}

.filter-option-name{
    max-width:200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

            <div class="all-filter-dialog border-top d-flex flex-column d-none" style=" position: absolute;top: 100%;left: 0;background: rgba(0,0,0,.8);z-index: 999; width: 100%; height: 100vh;">
            <div class="row bg-white">
                <div class="col-3 pe-0">
                    <div id="all-filters-list" class="list-group bg-light rounded-0 hide-scroll-thumb" style="height:300px;overflow:auto;position:relative;">
                        <?php foreach($filters as $index => $filter) { ?>
                            <?php if($filter['type'] !== 'option') { ?>
                                <a class="list-group-item list-group-item-action bg-light border-0 rounded-0 font-13  <?php echo ($index === 0) ? 'active' : ''; ?>" href="#_<?php echo $filter['key'].$filter['path']; ?>" data-path="<?php echo $filter['path']; ?>" data-key="<?php echo $filter['key']; ?>">
                                    <?php echo $filter['name']; ?>
                                </a>
                            <?php } else { ?>
                                <a class="list-group-item list-group-item-action bg-light border-0 rounded-0 font-13 <?php echo ($index === 0) ? 'active' : ''; ?>" href="#_<?php echo $filter['key'].$filter['path']; ?>" data-path="<?php echo $filter['path']; ?>" data-key="<?php echo $filter['key']; ?>">
                                    <?php echo $filter['name']; ?>
                                </a>
                            <?php } ?>
                        <?php } ?>
                    </div>
                </div>
                <div class="col-9 p-2">
                    <div data-bs-spy="scroll" data-bs-target="#all-filters-list" data-bs-offset="60" class="scrollspy-filters" tabindex="0">
                        <!-- filters other than options -->
                        <?php foreach($filters as $filter) { ?> 
                            <!-- for options other than range etc-->
                            <?php if($filter['type'] !== 'option' && $filter['type'] !== 'price' && $filter['type'] !== 'range' && $filter['type'] !== 'rating') { ?> 
                                <div class="filter-dialog d-flex flex-column" id="_<?php echo $filter['key'].$filter['path']; ?>" data-key="<?php echo $filter['key']; ?>" data-path="<?php echo $filter['path']; ?>" style="min-height:150px">
                                    <div class="fw-semibold font-16 px-2"><?php echo $filter['name']; ?></div>
                                </div>
                            <?php } else if($filter['type'] === 'price' || $filter['type'] === 'range' || $filter['type'] === 'rating') { ?> 
                                <div class="filter-dialog d-flex flex-column" id="_<?php echo $filter['key'].$filter['path']; ?>" data-key="<?php echo $filter['key']; ?>" data-path="<?php echo $filter['path']; ?>" style="min-height:150px">
                                    <div class="fw-semibold font-18 px-2"><?php echo $filter['name']; ?></div>
                                </div>
                            <?php } else if($filter['type'] === 'option') { ?>
                                <div class="filter-dialog d-flex flex-column" id="_<?php echo $filter['key'].$filter['path']; ?>" data-key="<?php echo $filter['key']; ?>" data-path="<?php echo $filter['path']; ?>" style="min-height:150px">
                                    <div class="fw-semibold font-16 px-2"><?php echo $filter['name']; ?></div>
                                </div>
                            <?php } ?>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>

    $(document).ready(function() {

        $('#all-filters-list a').on('click', function(e) {
            e.preventDefault();
            let targetSelector = $(this).attr('href');
            let targetElement = $(targetSelector);
            if (targetElement.length) {
        
                targetElement[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
               
                $(".all-filter-dialog")[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
   
         $(".scrollspy-filters").scrollspy({ target: "#all-filters-list", offset: 60 });

        $(".scrollspy-filters").on("activate.bs.scrollspy", function () {
    
            console.log('hello')
            $(".all-filter-dialog")[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });