html – 溢出属性在IE 11中不起作用

概述我的代码在大多数浏览器(Chrome,Firefox,Safari,Edge)中运行良好,但在IE11中似乎不起作用. 我正在阅读caniuse的已知问题但它似乎没有说任何有关IE11和溢出的内容.这是IE 11中的错误还是我错过了什么？ .container { display: flex; max-height: 100px; flex-direction: column; b 我的代码在大多数浏览器(Chrome,firefox,Safari,Edge)中运行良好,但在IE11中似乎不起作用.

我正在阅读caniuse的已知问题但它似乎没有说任何有关IE11和溢出的内容.这是IE 11中的错误还是我错过了什么？

.container {  display: flex;  max-height: 100px;  flex-direction: column;  border: 1px solID red;}.header {  background: #eee;}.container > div {  flex: 0 0 auto;}.container > div.content {  flex: 0 1 auto;  overflow: auto;}

<div >  <div >header without specific height. Always stays at top of .container,even if it is so long it uses up two lines.</div>  <div >    <div>Item no 1 in long List</div>    <div>Item no 2 in long List</div>    <div>Item no 3 in long List</div>    <div>Item no 4 in long List</div>    <div>Item no 5 in long List</div>    <div>Item no 6 in long List</div>    <div>Item no 7 in long List</div>    <div>Item no 8 in long List</div>    <div>Item no 9 in long List</div>    <div>Item no 10 in long List</div>    <div>Item no 11 in long List</div>    <div>Item no 12 in long List</div>  </div></div>

解决方法 如你所述,IE11在渲染flexBox时遇到很多问题.您没有找到有关此特定问题的文档的事实可能只是意味着它尚未被记录.但它似乎确实是一个错误.

就溢出属性而言,IE11将应用overflow：visible,无论实际值如何,除非声明宽度或高度.

在您的情况下,只需从flex-basis：auto转换为flex-basis：75px(仅举例),修复滚动条问题.

由于固定高度不是您想要的,您可以尝试targeting styles for just IE11.

.container {  display: flex;  max-height: 100px;  flex-direction: column;  border: 1px solID red;}.header {  background: #eee;}.container > div {  flex: 0 0 auto;}.container > div.content {  flex: 0 1 75px;             /* adjusted */  overflow: auto;}

<div >  <div >header without specific height. Always stays at top of .container,even if it is so long it uses up two lines.</div>  <div >    <div>Item no 1 in long List</div>    <div>Item no 2 in long List</div>    <div>Item no 3 in long List</div>    <div>Item no 4 in long List</div>    <div>Item no 5 in long List</div>    <div>Item no 6 in long List</div>    <div>Item no 7 in long List</div>    <div>Item no 8 in long List</div>    <div>Item no 9 in long List</div>    <div>Item no 10 in long List</div>    <div>Item no 11 in long List</div>    <div>Item no 12 in long List</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 溢出属性在IE 11中不起作用全部内容，希望文章能够帮你解决html – 溢出属性在IE 11中不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。