When I scroll the page, it works normally. But when I open the dropdown, I cannot seem to scroll, or it does "scroll" but it is very buggy, like it's displayed in the gif in URL. I work in brite.js with .tmpl and .js files. I am also using 3rdparty files like select2.min.js and select2.min.css. When I go to devTools I see that this dropdown is not actually dropdown but unordered list.

Here is some of the code related to selecting that span:

$('#tags12').select2({
            tags: true,
            multiple: 'multiple',
            tokenSeparators: [], //Here we choose delimiters
            dropdownParent: $('#cat2'),
            data: d
          });

          $('.select2-container').addClass('tags-styling');
          $('.select2-selection').addClass('tags-styling');

          //When tag is selected, added new, pressed space or enter
          $('#tags12').on('select2:select', function (e) {
            var data = e.params.data;

            //ajax call to add tags to database
            $('#tags12').empty();
            $.ajax({
              method: 'POST',
              url: main.config.dataBase,
              data: {
                tag_name: data.text,
                user_id: sessionStorage.getItem('user_id'),
                action: 'addTags'
              }
            }).done(function (resp) {
              var json = JSON.parse(resp);

              var tagToDbObj = {
                catId: catalog_id,
                tagId: json.id,
                tagName: data.text,
                user_id: sessionStorage.getItem('user_id')
              };

              //Ajax call to add tag to catalog
              $.ajax({
                method: 'POST',
                url: main.config.dataBase,
                data: {
                  Object: tagToDbObj,
                  action: 'bondTagtoCat'
                }
              }).done(function () {
                utils.messeage('Tag added!', 'success');
                historyTable.draw();
              });

              //Checks if tag is already selected
              if ($('#' + json.id).length) {
                utils.messeage('Tag already chosen', 'danger');
              } else {
                //if not appends new tag
                $('.tags-container').append(
                  '<div title="' +
                    json.description +
                    '" id="' +
                    json.id +
                    '" class="tag col-xs-6" style="background-color:' +
                    json.color +
                    ';"><div name="deleteTag"><div class="tagText">' +
                    data.text +
                    '</div><i class="fas fa-times"></i></div></div>'
                );
                $('#tags12').empty();
              }

I have tried all sorts of combinations with css and in js files, but I cannot seem to find the fix. Any tip or help would be apriciated. Thank you.

What devTools selection is on the page

in DevTools

gif showing what the problem is

I expected that by adding overflows in .less and .css files, something would change, but it stayed the same.