Как игнорировать родительское переполнение для множественного выбора?

Question

Мне нужно сделать одноразовый множественный выбор.Сейчас я использую плагин bootstrap multiselect, но не могу игнорировать его родительское переполнение: auto;

.pad12 {
  padding: 0 12px;
  overflow-x: auto
}

Вот пример для лучшего понимания, нажмите на селектор часовых поясов.https://jsfiddle.net/Shoup/rytcoxzu/3/

Answer 1

Добавить maxHeight

$('.f-timezone').multiselect({
      numberDisplayed: 1,
      maxHeight: 150,
      onChange: function (e, c) {
            e.checked = c;
        }
});

Добавить класс на событие изменения и изменить свой CSS как .multi .pad12

    $('.f-timezone').multiselect({

    numberDisplayed: 1,
    onChange: function (e, c) {
        e.checked = c;
    },

    onDropdownShown: function (event) {
        $('body').addClass('multi')
    },
    onDropdownHidden: function (event) {
        $('body').removeClass('multi')
    }
});

https://jsfiddle.net/lalji1051/5fkythr0/1/