Flex-direction: The column does not allow scrolling of children in Firefox.

I am using display flex on an element ( .outer

), which should adjust its height to the content, but should not exceed a certain height (for example 100px

).

Once the height is exceeded, I want the content inside to start scrolling vertically.

This behavior works like in Chrome, but in Firefox the content grows ( .wrapper

) to the height of its content ( .list

) and therefore it does not scroll.

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 not height

solves the scrolling problem, but causes a gap if the content is not high enough.