Расширение div, чтобы содержать содержимое, которое переполняет экран

Question

У меня есть установка, похожая на приведенный ниже каркас. Контейнерный блок с содержимым внутри. Div содержимого содержит несколько кнопок, количество кнопок не фиксировано и не известно раньше времени разработки.

Это фактический результат, который я получаю.

Это вызывает проблемы при попытке прокрутить содержимое Container-div, поскольку прокрутка заканчивается в конце content-div, а не в конце переполняющихся кнопок. Кнопки перетекают за пределы div и за пределы экрана.

Это мой желаемый результат:

Мне нужно, чтобы content-div расширился, чтобы вместить всеего кнопки содержимого в области прокрутки container-div. Все результаты, которые я нашел при поиске решений, не работают. Я использую Bootstrap 4 и думаю, что это может повлиять на результат. Поэтому решение должно работать с Bootstrap 4 (так как оно используется для остальной части сайта). Решение также (к сожалению) должно быть совместимо с IE11 +

Редактировать Соответствующий код (с использованием Vue2 и JSX):

<div v-dragscroll on-scroll={this.contentScrolled} ref="prompt-container" id="prompt-container" class="mx-2"> 
    <div ref="prompt-container-contents" id="prompt-container-contents">
    {
        this.promptsToShow.map(prompt => ([
            <BBtn
                variant="outline-primary"
                class="h-100 prompt-wrap mr-1 prompt-item"
                size="sm"
                pill
                on-click={() => { this.$emit(this.emitting, prompt); }}>
                {prompt}
            </BBtn>,
            <BBtn
                variant="outline-primary"
                class="h-100 prompt-wrap mr-1 prompt-item"
                size="sm"
                pill
                on-click={() => { this.$emit(this.emitting, prompt); }}>
                {prompt}
            </BBtn>]
        ))
    }
    <BBtn
        v-show={this.highestIndexToShow < this.prompts.length - 1}
        class="h-100 prompt-wrap mr-1 prompt-item"
        key="next"
        size="sm"
        pill
        on-click={() => { this.page++; }}>
        Show More
    </BBtn>
</div>

.prompt-wrap{
    white-space:pre-wrap;
}

#prompt-container {
    overflow-x: auto;
    overflow-y: hidden;
    /* Make an auto-hiding scroller for people using IE */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    /* Remove the default scrollbar for WebKit implementations */
    &::-webkit-scrollbar {
        display: none;
    }
}

#prompt-container-contents { 
    display: inline-block;
    float:left;
    transition: transform .2s ease-in-out;
}

.prompt-item {
    display: inline-flex;
    align-items: center;
}

Редактировать 2 Кодовая скрипка: https://jsfiddle.net/0r4hget3/1/

Это максимально приближенное к минимальному воспроизведению. Интересно, что предложенное мной исправление работает только для этого. Добавление float: left к content-div исправляет код в этой скрипке.

Насколько я могу судить, этот float нигде не переопределяется при запуске моего полного кода. Кто-нибудь имеет представление о том, что может быть причиной того, что этот float больше не решает проблему?