javascript - スリックカルーセル - コンテナの幅が機能しない

Question

作業中の Web サイトで Slick Carousel プラグインの使用を開始しましたが、何らかの理由で、Slick Carousel のターゲット要素の周りにラッパーを設定すると、オプションではないピクセルで設定しない限り、幅が考慮されません幅を親要素のサイズまで拡大する必要がある場合。

これが役立つ場合に備えて、Bootstrapも使用しています。

HTML

<div class="col-md-6 col-xs-12">
<div class="group-filter">
    <span class="title">Group Filter</span>
    <div class="group-slick-cell">
        <div class="group-slick-wrapper">
            <div class="group-slick">
                <div><button class="btn btn-groups">Group 1</button></div>
                <div><button class="btn btn-groups">Group 2 more text</button></div>
                <div><button class="btn btn-groups">Group 3</button></div>
                <div><button class="btn btn-groups">Group 4 text</button></div>
            </div>
        </div>
    </div>
</div>

以下：

.group-filter {
    display: table;
    width: 100%;

    .title {
        display: table-cell;
        font-size: 16px;
        color: @text-color;
        padding: 0 5px;
        vertical-align: middle;
        width: 1%;
    }

    .group-slick-cell {
        display: table-cell;
        width: 100%;
        height: 31px;

        .group-slick-wrapper {
            margin-left: 17px;
            width: 100%

            .btn {
                margin: 0 5px;
            }
        }
    }
}

JS:

groupSlick.slick({
    infinite: true,
    dots: false,
    speed: 200,
    slidesToShow: 3,
    slidesToScroll: 1,
    variableWidth: true,
    centerMode: true,
    draggable: false,
    accessibility: false
});

これが実際の問題の JSFiddle です。親コンテナーの子は、幅を 20,000px にプッシュしています。これは、Bootstrap が行うべき幅よりも広いです。

https://jsfiddle.net/wqvth9ms/