How do I create a flexbox modal that works in IE11?

[cjcenizal]

I’ve implemented this modal using flexbox because I want a sticky header and footer. My solution works in Chrome and Firefox: http://codepen.io/cjcenizal/pen/JomaNo

Markup in Jade:

    .blackout
      .flexModal
        .flexModal__inner
          .flexModal__header
            | Header
          .flexModal__body
            p Body content
          .flexModal__footer
            | Footer

SCSS:

    .blackout {
      background-color: rgba(black, .5);
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

      .flexModal {
        max-height: calc(100% - 40px);
        min-width: 400px;
        background-color: white;
        display: flex;
        flex-direction: column;
      }

        .flexModal__inner {
          min-height: 100%;
          display: flex;
          flex-direction: column;
        }

        .flexModal__header {
          display: flex;
          flex-shrink: 0;
        }

        .flexModal__body {
          flex-shrink: 1;
          overflow: auto;
        }

        .flexModal__footer {
          display: flex;
          flex-shrink: 0;
        }

The problem is that IE11 doesn’t render the modal correctly when it initially draws the page, and it doesn’t re-render it correctly when enlarging the window.

Here’s how it appears on first render. Notice how the footer isn’t visible? http://i.stack.imgur.com/SV9b2.png

When you make the window smaller, it re-renders correctly: http://i.stack.imgur.com/UHwB9.png

When you make the window bigger, it re-renders incorrectly: http://i.stack.imgur.com/gGuUw.png

Any suggestions about how to solve this or what the root cause is?

[Shikkediel]

A quick Google search turned up that IE needs explicit height set instead of min/max. Removing that from .flexModel and giving it height: calc(100% - 100px); seems to do the trick.

[cjcenizal]

Thanks, Shikkediel! That’s right, I’ve seen that too. I’ll update my original post to note that it’s important we use max-height, because that way the modal will shrink as the content in the scrollable area is reduced (otherwise it would look odd if the user has a tall window, with a tall, nearly empty modal, and a fixed footer).

[Shikkediel]

Ah yes, didn’t realise that. If you’re using JS you could throw some of that at it but I could imagine you wouldn’t want to.

[Author]

Posts