IE11中的嵌套Flexbox中断

Question

我找不到使它起作用的方法。我有一个包含两个主要部分的图块：

这种布局在IE11以外的所有地方都有效，我想是因为我有一个嵌套的flexbox。

外部flexbox如下：

绿色是flex：1，黄色是flex：0。

这里是内部Flexbox，位于绿色Flexbox内部。这是另一种简单的flex：1 / flex：0布局，就像外部flexbox一样。

在IE11中，内部flexbox将其他所有内容推离屏幕：

我需要支持IE11，我感觉好像缺少一个简单的解决方法。

请帮助！

Answer 1

IE11需要一个单位为flex-basis（flex属性的第3个值），根据source，当您设置flex: 1时，它实际上等于flex: 1 1 0。

尝试将每个flex属性从flex: X更改为flex: X 1 auto

Answer 2

看看CanIUse page about flex，我们可以看到：

  

  
• IE 11要求在第三个参数中添加一个单位，即flex-basis属性，请参阅MSFT文档      
    
  • 在IE10和IE11中，如果容器具有min-height但没有显式的height属性，则显示：flex和flex-direction：的容器将无法正确计算其flexed子代的大小。查看错误。
    
  • 使用最小高度时，IE 11不能正确垂直对齐项目，请参见错误
    
  

通过更具体地声明<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="size" id="size"> <option value="123">Medium</option> <option value="456">Large</option> <option value="789">XLarge</option> </select>声明，尝试调整一些CSS以免遇到这些错误。