Расширение элемента DOM с помощью jQuery

Этот способ поможет, если требуется расширить элемент, который не вмещает в себя собственное содержимое (убрать полосу прокрутки):

jQuery(document).ready(function($) {
    var mypre = $('pre');
    mypre.hover( function () {
        if(this.scrollWidth <= 764) { return }
        // console.log(this.offsetHeight); //with scrollbar
        // console.log(this.clientHeight);
        scrollbarHeight = this.offsetHeight - this.clientHeight;
        $(this)
            .css({  'width': this.scrollWidth+'px',
                    'max-width': this.scrollWidth+'px',
                    'padding-bottom': '+='+scrollbarHeight
            });
        $(this).closest('.primary').css('z-index', '111');
    }, function () {
        if(this.scrollWidth <= 764) { return }
        $(this)
            .css({
                'width': 'auto',
                'max-width': '100%',
                'padding-bottom': '-='+scrollbarHeight
            });
        $(this).closest('.primary').css('z-index', '');
    })
});

В данном случае расширяется элемент PRE. Как это работает, можно посмотреть на странице - https://ardeya.ru/izmenenie-formy-zakaza-woocommerce/.

В данном примере я дополнительно вычисляю высоту скроллбара (scrollbarHeight = this.offsetHeight - this.clientHeight;) и добавляю на эту высоту нижний отступ внутри элемента, для того, чтобы элемент не "уезжал" при раскрытии. Высота скроллбара вычисляется для того, чтобы покрыть разные браузеры, так как у каждого своя высота (хром - 15, файрфоркс - 12 и т.д.)

Дополнительно родительскому элементу придается область видимости (z-index), чтобы расширяющийся элемент PRE не "нырял" под боковую колонку. Для чего это нужно - можно почитать в статье о z-index (порядок наложения элементов)