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

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 and it was solved in my other stackoverflow post using Firefox, but in IE11 the content wrapper(.wrapper) still 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%;
  min-height: 0;
  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>

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