IE11 flex wrapper with align-items disable scroll for flex column child

Question

how can I enable scroll for flex column child, when flex column has max-height and contained in flex container ?

I've got an example here https://codepen.io/ChatduChesire/pen/vYKVJoR

When .modal-wrapper contains align-items:center; or any other value for align-items there is no scroll for .modal-content in IE11, when I remove align-items everything works fine. I need .modal has limited height when it overflows, but fluid when in doesn't.

Answer 1

I suggest you try to replace the overflow: hidden; with overflow: auto; in the .model class will help to fix the issue in the IE 11 browser.

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal-wrapper {
  display:flex;
  align-items:center;
  height: 100%;
}

.align-top {
  align-items: flex-start;
}

.modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 25%;
  border: 1px solid red;
  overflow: auto;
}

.modal-content {
  flex: 1 1 auto;
  overflow: auto;
  min-height:0;
}
.header, footer {
  flex: 0 0 auto;
}

<div class="modal-overlay">
<div class="modal-wrapper">
  <div class="modal">
    <header>Header</header>

    <div class="modal-content">
    
        <ul>
          <li>Item</li>
           <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
            <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
            <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
            <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
    
    </div>
    <footer>Footer</footer>
  </div>
</div>
</div>

Output in the IE 11 browser:

• Output when there are many list elements(will show the scrollbar).

• Output when there are less or only one element(show the height properly).