![](/img/trans.png)
[英]Flexbox column grow not accounting for wrapped content correctly in IE11
[英]IE11 flexbox container does not grow
考虑以下代码段:
.container { display: flex; align-items: center; flex-direction: column; border: 3px solid red; } .action { flex-basis: 100%; flex-shrink: 1; width: 100%; } .button { font-size: 12px; line-height: 3rem; width: 100%; }
<div class="container"> <div class="action"> <button class="button" type="button"> Button label 1 </button> </div> <div class="action"> <button class="button" type="button"> Button label 2 </button> </div> </div>
在Chrome浏览器中,按钮垂直显示,并且容器逐渐增大以适合它们:
但是,在IE11中,按钮重叠并且容器保持小于1个按钮:
这是IE中的已知错误吗? (如果是,将不胜感激指针)
有已知的解决方法吗?
好吧,我知道了! 问题是align-items: center;
。 我相信这正是您要寻找的内容(无需更改html):
.container {
display: flex;
flex-direction: column;
border: 3px solid red;
}
.button {
font-size: 12px;
line-height: 3rem;
width: 100%;
}
旁注:我知道VM框显示MSEdge Win10预览,但这确实是IE11。 较深的蓝色“ e”图标是MS Edge。 我不得不打开记事本并制作一个本地HTML文件,因为Codepen不能与IE 11一起使用,也不在乎修复我的缩进。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.