使用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>` 

我如何得到這個正確的擺放？

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

編輯： 我使用flexbox在可滾動區域遇到的問題之一是元素被擠壓並強行插入該區域，因此無法滾動。

Answer 1

首先，如果您想使用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> 

我希望這有助於一些:-)

Answer 2

我碰到這個頁面http://fantasai.inkedblade.net/style/discuss/flexbox-min-size/這給了我一個提示，就來了爲什麼組件在我的可滾動區域內被壓壞或開始重疊。爲了解決這個問題，我在我的滾動區域內放置了一個最小寬度的元素/組件。這允許滾動發生。