Flexbox overflow-y: scroll not working in IE,Edge and Firefox

Question

I have a wraper div that have some children. Since the height of all children combined is greater than that of wrapper div, I want the parent to be able to scroll.

The following solution works in Chrome but not in Edge,IE and Firefox. I have tried different methods but none of my solution seems to work. Does anyone have any solution that will work across different browsers?

#wrapper {
  display: flex;
  flex-direction: column-reverse;
  background-color: green;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

.inner {
  background-color: red;
  height: 100px;
  width: 100px;
  margin-top: 10px;
  min-height: 100px;
}

<div id="wrapper">
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
</div>

score 1 · Accepted Answer · answered Feb 23 '18 at 14:15

1

Never mind. I found a solution here. Seems like it is a bug in Flexbox itself.

answered Feb 23 '18 at 14:15

notQ

229
3
14

Flexbox overflow-y: scroll not working in IE,Edge and Firefox

1 Answers1