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

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

只要没有元素被添加到div中，效果很好。当我修改并添加一行（http://jsfiddle.net/5A9c9/7/中的第11行）时，布局完全混乱。它几乎可以是任何其他标签，它仍然会搞砸。

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

我如何得到这个正确的摆放？

p.s.或者只使用css和flexbox的这种面板的其他完整工作示例？

编辑：我使用flexbox在可滚动区域遇到的问题之一是元素被挤压并强行插入该区域，因此无法滚动。

来源

2014-09-21 sathishvj

首先，如果您想使用flexbox魔术，请在CSS中使用“display：flex”。设置显示在外层和内层的div弯曲，像这样：

#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>

我希望这有助于一些:-)

来源

2014-09-24 09:16:30 wojjas

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

来源

2014-09-24 15:00:46 sathishvj

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

回答

相关问题