<分区>
我有 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 上，滚动条在整个屏幕上(不仅仅是内部面板)。
有什么建议吗？
最佳答案
这个问题在 Edge 和 Firefox 上都存在，是由于 flex column item 的 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%;
}
堆栈片段
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>关于html - flex fill + overflow MS-Edge 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48167041/