IE11中嵌套的Flexbox中断[重复]答案

【问题标题】：Nested Flexbox breaks in IE11 [duplicate]IE11中嵌套的Flexbox中断[重复]
【发布时间】：2019-02-16 11:28:46
【问题描述】：

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

除了 IE11 之外，这种布局适用于任何地方，我想是因为我有一个嵌套的 flexbox。

外层flexbox如下：

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

这是内部的 flexbox，它位于绿色的 flexbox 内。这是另一个简单的 flex:1/flex:0 布局，就像外部 flexbox 一样。

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

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

请帮忙！

【问题讨论】：

这是我的密码笔：codepen.io/jkies00/pen/EewZyX
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及“重现它所需的最短代码” i> 在问题本身。请参阅：如何创建minimal reproducible example。
当涉及到 IE11 时，在 Codepen 或 Fiddle 中制作样本是没有用的，因为两者都不起作用，Stack sn-p 在 IE11 中确实有效。
在 IE11 中破坏你的布局的是 flex:0; （你在这里的真正意思是什么？） 删除它，其余的 (flex:1; 这里的 IE11 并不真正需要)，让浏览器尽可能地自己计算。太多的 flex 会杀死 flex 。 codepen.io/layedhere/full/xaWzXy 如果您认为这可以解决您的问题，请告诉我们。
关于无用的codepen，对不起，这是一个将在IE 11中运行的代码：s.codepen.io/jkies00/debug/EewZyX/ZoMBaKLGeqLk

标签： html css flexbox

【解决方案1】：

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

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

【讨论】：

@LGSon 编辑了我的答案，感谢您的建议。 :)

【解决方案2】：

查看CanIUse page about flex，我们可以阅读：

IE 11 需要将一个单位添加到第三个参数，flex-basis 属性请参阅 MSFT 文档

在 IE10 和 IE11 中，如果容器具有 min-height 但没有显式的 height 属性，则具有 display: flex 和 flex-direction: column 的容器将无法正确计算其伸缩子项的大小。查看错误。

IE 11 在使用 min-height 时无法正确垂直对齐项目，请参阅错误

通过更具体的 flex 声明，尝试调整你的一些 CSS 以不面对这些错误。

【讨论】：