javascript - 扩展 div 以包含溢出屏幕的内容

Question

我有一个类似于下面的线框的设置。一个容器 div，里面有一个内容 div。内容 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修复程序中。

据我所知，在运行我的完整代码时，这个浮点数不会在任何地方被覆盖。有谁知道可能导致此浮动不再解决问题的原因？

标签： javascripthtmlcssbootstrap-4