Read more

Do not use "flex: 1" or "flex-basis: 0" inside "flex-direction: column" when you need to support IE11

Arne Hartherz
August 06, 2018Software engineer at makandra GmbH

Internet Explorer has reached EOL. You hopefully do not need to know this any more.

Flexbox is awesome. Most of it even works in IE11, but flex: 1 won't work reliably in Internet Explorer.
This it because implicitly sets flex-basis: 0 which IE fails to support properly.

Example

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Consider the following HTML and CSS.

<div class="container">
  <div class="child">
    foo
  </div>
  <div class="bar">
    bar
  </div>
</div>
.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}

See it in action at Plunker Show archive.org snapshot .

Background

flex: 1 is a shortcut to flex-grow: 1 + flex-shrink: 1 + flex-basis: 0. A base size of zero is okay because the element would grow when needed.
In Internet Explorer, this only works when the flex container uses flex-direction: row. For flex-direction: column, children will overlap as if they would not consume any height.

How to fix

What works, and what you probably want anyway, is flex-basis: auto.

We recommend you use the flex shorthand property with all 3 values:

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1 1 auto;
}

In the example above, the flex children are allowed to grow and shrink, so the result will be the same. But using auto, it finally works in IE11.

Posted by Arne Hartherz to makandra dev (2018-08-06 10:59)