Understanding unit-less flex-basis

Question

There is a longstanding issue with Internet Explorer 11 and flexbox that a unit must be declared with flex, e.g.

/* Works */
flex: 1 0 0%;
/* Does not work */
flex: 1 0 0;

The workaround would be to specify a unit for the ending zero - preferably % because minifiers don't usually remove that unit.

Unfortunately, I am working with Prepros (SCSS compiler) and I use the built-in CSS minifier that decides to remove the percentage anyway. I had thought this would only give me issues in IE 11, but now I have noticed that the issue is also seen in all other major browsers (tested on Edge, FF, Chrome).

Take the code below. I expect the main element (green) to grow to accommodate for its contents, but it does not. At least not when using a unitless value. If you change flex to 1 0 0% for main, everything works as expected. Why is that?

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: red;
  height: 120px;
  padding: 12px;
}

main {
  background: green;
  display: flex;
  overflow: scroll;
  align-items: center;
  flex: 1 0 0;
}

footer {
  background: blue;
  height: 80px;
}

<div class="page-wrapper">
  <!-- more HTML elements -->
  <div class="container">
    <header></header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>

      <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac
        turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Nam nec ante. </p>

    </main>
    <footer></footer>
  </div>
</div>

Answer 1

Revised answer

When using a unitless 0 as initial value for the flex-basis property, the height will be based on the flex-grow/flex-shrink value.

The in this case flex-grow value 1 will tell the item to grow and fill the remaining space of its parent, the container.

The container's height is set to 100%, which will be based on its parents height, the page-wrapper.

But since the page-wrapper doesn't have a height from where the container is suppose to calculate its 100% from, it will be 0, hence the main will too.

Now, if one change the flex-basis to a percentage, 0%, it will base its height on the content, before the flex-grow/flex-shrink value will be added, hence the main content will be visible.

---

To get a consistent output on all browsers, all parents need a height, and flex-basis need a unit (or simply put, IE11 need a unit, the rest doesn't)

html, body {
  width: 100%;
  height: 100%;
}

.page-wrapper {
  height: 100%;                     /*  added  */
}

.container {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: red;
  height: 120px;
  padding: 12px;
}

main {
  background: green;
  display: flex;
  overflow: scroll;
  align-items: center;
  flex: 1 0 0%;                     /*  IE11 need a unit  */
}

footer {
  background: blue;
  height: 80px;
}

<div class="page-wrapper">
  <!-- more HTML elements -->
  <div class="container">
    <header></header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>

      <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac
        turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Nam nec ante. </p>

    </main>
    <footer></footer>
  </div>
</div>

---

Regarding your Prepros (SCSS compiler), I guess it does what it is suppose to, as in more or less all other property values other than flex-basis, it can safely remove the percentage sign if the value is 0%. Try setting the percent to anything but that, i.e. 0.001%

Answer 2

You're saying that you need flex: 1 0 0%, so your layout works in IE11

But your CSS preprocessor is stripping away the %.

The simple solution is to not use the flex property.

This is the title of the bug report you cited:

flex shorthand declarations with unitless flex-basis values are ignored

It says "flex shorthand". That's the only property affected.

You then write:

The workaround would be to specify a unit for the ending zero.

Actually, a better workaround may be to use the long-hand properties.

Instead of this:

• flex: 1 0 0%

Use this:

• flex-grow: 1
• flex-shrink: 0
• flex-basis: 0% / flex-basis: 0 (both should work in IE11)

More information:

• flex property not working in IE