Posted 12 days ago. Visible to the public.

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

Flexbox is awesome. Most of it even works in IE11, but flex: 1 won't work reliably in Internet Explorer.

Example

Consider the following HTML and CSS.

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

See it in action at Plunker.

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.

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.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
12 days ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more