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

Question

我在使用 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 的可滚动区域遇到的问题之一是元素被挤压并强制适合该区域，因此它没有机会滚动。

Answer 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”段落放在字段集中。我无法想象你会想要它在 fieldset 之外......像这样:

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

我希望这对一些人有所帮助:-)