带有使用 css 和 flexbox 的滚动按钮的可滚动 html 面板答案

【问题标题】：scrollable html panel with scroll buttons using css and flexbox带有使用 css 和 flexbox 的滚动按钮的可滚动 html 面板
【发布时间】：2014-09-24 23:00:46
【问题描述】：

我在使用 css 和 flexbox 创建可滚动面板时遇到了布局问题。我看到了这个（http://jsfiddle.net/5A9c9/）

只要没有元素被添加到 div 中，它就可以正常工作。当我修改它并添加一行（http://jsfiddle.net/5A9c9/7/ 中的第 11 行）时，布局完全混乱了。它几乎可以是任何其他标签，但它仍然会变得混乱。

`<!-- adding this line messes it up -->
<p>abcd</p>`

我怎样才能让它正确布局？

附言或仅使用 css 和 flexbox 的此类面板的任何其他完整工作示例？

编辑：我在使用 flexbox 的可滚动区域遇到的问题之一是元素被压碎并被强制装入该区域，因此它没有机会滚动。

【问题讨论】：

标签： html css flexbox scrollable

【解决方案1】：

首先，如果您想使用 flexbox 魔法，请在您的 CSS 中使用“display:flex”。在外部和内部 div 中设置显示为 flex，如下所示：

    #scrollBox {
        display:flex;        /* <---  here */
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-x: auto;
        -ms-overflow-y: hidden;
        white-space: nowrap;
    }
    #scrollBox > div {
        display: flex;       /* <---  and here */
        margin-right: 10px;
    }

其次，在您的 html 中，将您的“abcd”段落放入字段集中。我无法想象你会想要它在字段集之外......就像这样：

        <div class="firstPanel">
            <fieldset class="firstPanel">
                <legend>Panel 1</legend>
                    <p>abcd</p>
            </fieldset>
        </div>

我希望这会有所帮助:-)

【讨论】：

【解决方案2】：

我遇到了这个页面http://fantasai.inkedblade.net/style/discuss/flexbox-min-size/，它提示了我为什么组件在我假定的可滚动区域内被压碎或开始重叠。为了解决这个问题，我为滚动区域内的元素/组件设置了最小宽度大小。这允许滚动发生。

【讨论】：