css - Angular 组件元素在 ie11 中并不总是可设置样式

Question

当我创建一个组件 ng g c my-component 时，一旦我打开 polyfill，内容就可以在 ie11 中正常呈现。然而，该组件破坏了 CSS，拒绝设置样式——特别是，无论内容如何，​​它都拒绝占据任何高度。调试，起初我以为它拒绝背景颜色(我用它来识别 ie 中的 block ，因为没有悬停时突出显示)，但是当我添加一个明确的高度时，背景颜色突然呈现。

示例(在 app-my-component 内部):

<article class="my routable component">
  <app-child-component></app-child-component>
  <footer>should be under the inner component content</footer>
</article>

在应用子组件中:

<!-- this section will never have a height -->
<section class="child component">
  <app-inner-component></app-inner-component>
</section>

在应用内部组件中:

<!-- this section naturally will have height after the async returns results -->
<section class="inner component">
  <div *ngFor="const item in asyncResultItems">hi mom!</div>
</section>

页脚文本将呈现在应用内部组件的内容之上。 我更喜欢后面的页脚文本——基本上，IE11 应该像对待 div 一样对待 app-* 元素，但在给出高度时它似乎拒绝计算它们(样式 inside 工作得很好，虽然)。

对此可以做些什么(仅将组件包装在包含的 div 中本身也不起作用)？

完整示例:https://stackblitz.com/edit/angular-fhmded

请注意，感谢惊人的帮助，我已经诊断出问题(我在最小示例和我的实际代码之间添加了越来越多的差异，直到我重现它)。 Flex 列 在子组件上中断。

Answer 1

IE11 不能正确支持 flexbox。正如您在 https://caniuse.com/#feat=flexbox 上看到的那样有许多已知问题。它对语法也非常敏感。如果我将您的 flex: 1 规则更改为 flex: 1 1 auto 那么它至少对我来说似乎可以正常工作。