flex fill + overflow MS-Edge issue

Question

I have generic CSS (SCSS) style for flex:

.flex {
  display: flex;    
  &.v {
    flex-direction: column;
  }
  &.h {
    flex-direction: row;   
  }  
  > * {
    flex: 0 0 auto;
  } 
  > .fill {
    flex: 1 1 auto;
 }  
 &.auto {
    overflow: auto;
 }
}

It works fine on Chrome: https://codepen.io/anon/pen/baLBNG

However on MS-Edge scroll bar is on entire screen (not inner panel only).

Any advise?

Answer 1

This problem exist on both Edge and Firefox, and is caused by the fact that a flex column item's min-height defaults to auto and as such can't be smaller than its content.

Adding min-height: 0 to the <div class="fill flex h"> element will solve it.

Stack snippet

html, body {
  height: 100%;
  margin: 0;
}

.flex {
  display: flex;
}
.flex.v {
  flex-direction: column;
}
.flex.h {
  flex-direction: row;
}
.flex > * {
  flex: 0 0 auto;
}
.flex > .fill {
  flex: 1 1 auto;
}
.flex.auto {
  overflow: auto;
}
.flex.minheight {
  min-height: 0;                   /*  added  */
}

<div class="flex v" style="height: 100%;">
  <div>head</div>    
  <div class="fill flex h minheight">
    <div style="background-color: green;">side</div> 
    <div class="fill flex v auto" style="background-color: red;">
      <div style="height: 1000px;">long content</div>
    </div>
  </div>
  <div>foot</div>
</div>

---

If you want this to work on IE as well, you could add this IE specific CSS rule

_:-ms-fullscreen, :root .flex.fill_ie {       
  flex: 1 1 0%;
}

Stack snippet

html, body {
  height: 100%;
  margin: 0;
}

.flex {
  display: flex;
}
.flex.v {
  flex-direction: column;
}
.flex.h {
  flex-direction: row;
}
.flex > * {
  flex: 0 0 auto;
}
.flex > .fill {
  flex: 1 1 auto;
}
.flex.auto {
  overflow: auto;
}
.flex.minheight {
  min-height: 0;                              /*  added  */
}
_:-ms-fullscreen, :root .flex.fill_ie {       
  flex: 1 1 0%;                               /*  added  */
}

<div class="flex v" style="height: 100%;">
  <div>head</div>    
  <div class="fill flex h minheight">
    <div style="background-color: green;">side</div> 
    <div class="fill flex v auto" style="background-color: red;">
      <div style="height: 1000px;">long content</div>
    </div>
  </div>
  <div>foot</div>
</div>