Flex-direction:column doesn't allow children to be scrollable in Firefox

Question

I am using display flex for an element (.outer) which should adjust its height to the content but must not exceed a certain height (e.g. 100px).

Once the height is exceeded I want that the content inside to start to scroll vertically.

This behaviour works as expected on Chrome but in Firefox the content wrapper (.wrapper) growth to the height of its content (.list) and therefore it is not scrollable.

You can try it yourself using this simplified example:

.outer {
  display: flex;
  max-height: 100px;
  overflow: hidden;
  flex-direction: column;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  background: purple;
  overflow: scroll;
}

<div class="outer">
  <div class="wrapper">

    <div class="list">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
    </div>

  </div>

</div>

https://codepen.io/anon/pen/rzOpPZ

Setting max-height to height solves the scroll problem but causes a white space if the content is not high enough.

@fen1x thanks that would solve my problem but unfortunately I need it to be a max-height as it would create a large whitespace otherwise. — Talie, Jul 28 '17 at 12:10

score 5 · Accepted Answer · answered Jul 28 '17 at 12:12

5

add min-height:0 to the .wrapper class. It will work.

answered Jul 28 '17 at 12:12

Priyanjit

305
3
9

Wow cool that's exactly what I was looking for! – Talie Jul 28 '17 at 12:16
Glad that helped. Cheers! – Priyanjit Jul 28 '17 at 12:16

score 1 · Answer 2 · answered Jul 28 '17 at 12:15

1

This should fix

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  min-height:0;
}

answered Jul 28 '17 at 12:15

Supratik Rulz

235
2
8

Flex-direction:column doesn't allow children to be scrollable in Firefox

2 Answers2

Linked