прокручиваемая панель html с кнопками прокрутки с использованием css и flexbox

Question

У меня возникают трудности с компоновкой при создании прокручиваемой панели с использованием css и flexbox. Я видел этот (http://jsfiddle.net/5A9c9/)

, который работает до тех пор, пока в div нет никаких элементов. Когда я изменяю это и добавляю одну строку (строка 11 в http://jsfiddle.net/5A9c9/7/), макет полностью перепутался. Это может быть почти любой другой тег, и он все еще запутался.

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

Как я могу получить это правильно?

p.s. или любые другие полные рабочие примеры такой панели, использующей только css и flexbox?

Редактировать: Одна из проблем, которые я ударил с помощью прокручиваемой области с помощью flexbox, заключалась в том, что элементы были раздроблены и принудительно установлены в область, и поэтому у нее не было возможности прокручиваться.

Answer 1

Для начала используйте «display: flex» в вашем CSS, если вы хотите использовать магию flexbox. Установить дисплей изгибаться в обоих наружных и внутренних дивы так:

#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/, которая дала мне намек на почему компоненты были раздавлены или начали перекрываться в пределах моей предполагаемой прокручиваемой области. Чтобы решить эту проблему, я установил размер минимальной ширины для элементов/компонентов в моей области прокрутки. Это позволяет прокручивать.