Search code examples
htmlcssflexboxinternet-explorer-11

IE11 flexbox container does not grow

Consider the following snippet:

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 3px solid red;
}
.action {
  flex-basis: 100%;
  flex-shrink: 1;
  width: 100%;
}
.button {
    font-size: 12px;
    line-height: 3rem;
    width: 100%;
}
<div class="container">
  <div class="action">
    <button class="button" type="button">
      Button label 1
    </button>
  </div>
  <div class="action">
    <button class="button" type="button">
      Button label 2
    </button>
  </div>
</div>

In Chrome, the buttons are displayed vertically and the container grows to fit them:

Chrome

But, in IE11, the buttons overlap and the container remains smaller than 1 button:

IE11

Is this a known bug in IE? (if yes, a pointer will be appreciated)

Is there a known workaround?

Solution

  • Okay, I figured it out! The problem is the align-items: center;. I believe this is exactly what you're looking for (no changes to the html):

    .container {
  display: flex;
  flex-direction: column;
  border: 3px solid red;
}
.button {
  font-size: 12px;
  line-height: 3rem;
  width: 100%;
}

    IE 11

    Side note: I know the VM box says MSEdge Win10 preview, but this is indeed IE11. The darker blue "e" icon is MS Edge. I had to crack open Notepad and make a local HTML file, since codepen doesn't work with IE 11, and didn't care to fix my indentations.