panel fixed with scroll in content

Question

I'm trying to do dynamic panel in jQuery and ajax.

My idea is that when I select a checkbox execute my ajax and return all my items with category_id that have this checkbox. All my process is ok, but my problem is that I want my panel heading to be fixed in my modal, and content with scroll-y but I can't to do this.

This is my code:

// SET CATEGORY PRODUCT
$(".div-bag").append(`
                    <div class="container-offer-c" style="overflow-y: scroll; overflow-x: hidden; height: 150px; margin-bottom: 20px;">
                        <div class="panel-heading-offer bg-secondary"><span class="ml-3"> ARTICULOS C </span></div>
                    </div>
                `);

// LOOP TO GET ITEMS C
$.each(response[0], function(index, value) {
    $(".container-offer-c").append(`
                        <div class="container-offer-items" >
                            <div class="panel-heading-offer-items row align-items-center mt-2">
                                <div class="col-md-1 ml-2">
                                    <input type="checkbox" class="${ value.id } selectItem" value="${ value.id }">
                                </div>
                                <div class="col-md-2 ml-2">
                                    <span>${ value.codigo }</span>
                                </div>
                                <div class="col-md-4">
                                    <span class="size-font">${ value.nombre }</span>
                                </div>
                                <div class="col-md-2">
                                    
                                </div>
                                <div class="col-md-2">
                                    <input type="number" class="form-control" value="1" style="width: 100%; text-align:center">
                                </div>
                            </div>
                        </div>
                    `)

This code results in:

but I need that my panel fixed, "ARTICULOS C" fixed and his content with scroll-y

Thanks for read me and sorry for my bad English

Answer 1

I solved my problem adding a new div:

// SET CATEGORY PRODUCT
                        $(".div-bag").append(`
                                <div class="container-offer-1" style="overflow-y: scroll; overflow-x: hidden; height: 150px; margin-bottom: 20px;">
                                    <div class="panel-heading-offer bg-secondary"><span class="ml-3"> MANTENIMIENTO </span></div>
                                </div>
                                <div class="container-offer-items-secondary-maintenance" style="overflow-y: scroll; overflow-x: hidden;">
                                </div>
                        `);