0

I have a div dropdown element. I'm using flexbox so I can easily order the contents using order:

.dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  display: flex;
  flex-flow: column-reverse nowrap;
}
<div class="dropdown-content">
  <div class="selectable" style="order: 700">Something</div>
  <div class="selectable" style="order: 100">Something</div>
  <div class="selectable" style="order: 800">Something</div>
</div>

This works fine on Chrome, the content is scrollable, but Firefox refuses to show scrollbars. If I force the scrollbars, by setting overflow-y: scroll; they're just disabled scrollbars.

I've tried adding min-height:0; min-width:0; but that does nothing.

Asons
  • 84,923
  • 12
  • 110
  • 165
Jelle De Loecker
  • 20,999
  • 27
  • 100
  • 142
  • Is this question helpful? https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox – sol Sep 27 '17 at 08:12
  • I can't see any of that. Please make the code to reflect your problem. – Dejan.S Sep 27 '17 at 08:17
  • I had the same kind of problem with FF on a chat application where i needed column-reverse... Their implementation of flexboxes feels still buggy when it comes to column-reverse... – sjahan Sep 27 '17 at 08:18
  • This answer of mine has some more info and sample: https://stackoverflow.com/questions/34213227/scrollable-div-to-stick-to-bottom-when-outer-div-changes-in-size/34330934#34330934 – Asons Sep 27 '17 at 10:34

0 Answers0