繁体   English   中英

IE11 flexbox容器不会增长

[英]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个按钮:

IE11

这是IE中的已知错误吗? (如果是,将不胜感激指针)

有已知的解决方法吗?

好吧,我知道了! 问题是align-items: center; 我相信这正是您要寻找的内容(无需更改html):

.container {
  display: flex;
  flex-direction: column;
  border: 3px solid red;
}
.button {
  font-size: 12px;
  line-height: 3rem;
  width: 100%;
}

IE 11

旁注:我知道VM框显示MSEdge Win10预览,但这确实是IE11。 较深的蓝色“ e”图标是MS Edge。 我不得不打开记事本并制作一个本地HTML文件,因为Codepen不能与IE 11一起使用,也不在乎修复我的缩进。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM