Estoy tratando de hacer un panel dinámico en jQuery y ajax.

Mi idea es que cuando seleccione una casilla de verificación, ejecute mi ajax y devuelva todos mis elementos con category_id que tengan esta casilla de verificación. Todo mi proceso está bien, pero mi problema es que quiero que el encabezado de mi panel se arregle en mi modal y el contenido con scroll-y, pero no puedo hacer esto.

Este es mi código:

 // 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> `)

Este código da como resultado:

pero necesito que mi panel se arregle, "ARTICULOS C" se arregle y su contenido con scroll-y

Gracias por leerme y perdon por mi mal ingles