CSS flex 属性不适用于 Angular 4

Question

我有以下 CSS 样式（在全局样式表中）：

#container {
    align-items: stretch;
    display: flex;
    flex: 1;
    margin: 1rem auto;
    max-width: 64rem;
    width: 100%;
}

在纯 HTML 文件中，容器使用窗口的全高。 然而，在我的 Angular 4 项目中， flex 属性实际上没有任何效果。为什么呢？我该如何解决这个问题？

这是一个 JSFiddle：jsfiddle

它应该是这样工作的。但是，当我将 HTML 模板移动到有角度的（将特定的 CSS 拆分为 component.css 文件和全局样式（如 #container）到全局样式表）时，它不再起作用了。容器不会填满整个宽度，只会记录元素的高度。

Answer 1

我发现了错误...

flexbox 的问题在于，如果您在带有display: flex 的容器中有（角度）组件，当它们被加载时，app-samplecomponent 标记仍然存在并干扰 flexbox 的工作。