IE11上的0％基础的Flex项目溢出 [英] Flex item with 0% basis overflows on IE11

问题描述

从这个简单的代码中可以看出： http://codepen.io/anon/pen/Mazjyv ，有一个按钮是一个具有 flex-basis 0％的flex项目。 p>



在其他浏览器中，内容不会溢出按钮容器，但是在IE11上。

任何线索？

解决方案

问题是这个规则：

 按钮
 {
 flex：0 0 0％; 
} 
  

您告诉按钮：不增长，不缩小，您的初始主要尺寸为0 。

而是使用：

 按钮
 {
 flex：1 0 0％ ; 
} 
  

此外，btw文本溢出也发生在Chrome 46。 p>

As can be seen in this simple codepen: http://codepen.io/anon/pen/Mazjyv, there's a button which is a flex item with a flex-basis of 0%.

In other browsers content does not overflow the button container, however on IE11 it does.

Any clue why that is?

解决方案

The problem is this rule:

button
{
    flex: 0 0 0%;
}

You're telling the button: don't grow, don't shrink, your initial main size is 0.

Instead use:

button
{
    flex: 1 0 0%;
}

Also, btw, the text overflow was also happening in Chrome 46.

这篇关于IE11上的0％基础的Flex项目溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！