Question

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

只要没有元素添加到div中，

效果很好。当我修改它并添加一行（http://jsfiddle.net/5A9c9/7/中的第11行）时，布局完全搞砸了。它可能几乎是任何其他标签，它仍然搞砸了。

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

我如何才能让自己正确地摆脱它？

P.S。或仅使用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>

我希望这会有所帮助： - ）

Answer 2

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

使用css和flexbox滚动按钮的可滚动html面板

2 个答案: