弹性填充+溢出MS-Edge问题

Question

我有用于flex的通用CSS（SCSS）样式：

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

在Chrome上运行正常：https： //codepen.io/anon/pen/baLBNG

但是，在MS-Edge上，滚动条位于整个屏幕上（不仅限于内部面板）。

有什么建议吗？

Answer 1

Edge和Firefox上均存在此问题，这是由于以下事实导致的：弹性列项目的min-height默认值为auto，因此不能小于其内容。

添加min-height: 0到<div class="fill flex h">元素将解决它。

堆栈片段

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>

如果您希望它也能在IE上运行，则可以添加此IE特定的CSS规则

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

堆栈片段

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

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  */
}