Прокрутка не работает с CSS3 flex box в Firefox - PullRequest
Новая
       12

Прокрутка не работает с CSS3 flex box в Firefox

2 голосов
/ 30 ноября 2011

Я использую box-flex для своего макета, но не могу заставить гибкую коробку прокручиваться.

HTML: 

<div class='dashboard'>
  <div><button>Widget</button></div>
  <div class="noboard"><button>Yammer</button>
  <div class="yammerboard" >
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
      <div><button>Dashboard22</button></div>
  </div>
  </div>
  <div><button>Notifications</button></div>
</div>

CSS: 

.dashboard {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient:vertical;
    -ms-box-orient: horizontal;
    -moz-box-orient:horizontal;
    -webkit-box-orient: horizontal;
    border: solid 2px black;
    overflow-y:auto;
}
.noboard {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient:vertical;
    -ms-box-orient: vertical;
    -moz-box-orient:vertical;
    -webkit-box-orient: vertical;
    overflow-y:auto;
}
.yammerboard {
    display: box;
    display: -webkit-box;
    display: -moz-inline-box;
    display: -ms-box;
    box-orient:vertical;
    -ms-box-orient: vertical;
    -moz-box-orient:vertical;
    -webkit-box-orient: vertical;
    overflow-y:scroll;
    -moz-box-sizing: inherit;
    box-flex: 0;
    -ms-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-box-flex: 0;
    -moz-box-lines:multiple;
}

В Firefox я хочу, чтобы он прокручивался с помощью overflow:auto и не давал гибкому боксу расширяться по вертикали. Настройка box-flex: 0; не работает.

Какие-либо предложения о том, как этого добиться?

Ответы [ 2 ]

3 голосов
/ 04 июля 2012

У меня была похожая проблема с вертикальной прокруткой на гибкой коробке в Firefox.Когда содержимое переполнялось по вертикали, Firefox отображал желоба полосы прокрутки, но не имел ручки прокрутки, а поле содержимого оставалось фиксированным и не прокручиваемым.

Я решил проблему, просто добавив минимальную высоту в поле с помощью flex-boxимущество.В любом случае мне нужно было установить минимальную высоту, но вы можете взломать минимальную высоту: 1px в любом случае.

Я проверял это поведение только в Firefox 13, YMMV.

1 голос
/ 02 декабря 2011

Flex-боксы в Firefox сейчас довольно причудливые, они немного не определены.Существует известная проблема, заключающаяся в том, что они не работают с элементами с фиксированным или абсолютным позиционированием.Также давайте знать, что для работы флексбоксов в Firefox ДОЛЖНА быть ширина, иначе она будет рассматриваться как встроенный блок.

...