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模板移动到angular（将特定的CSS拆分为 component.css 文件和全局样式，如#container到全局样式表）时，它就不再起作用了。容器没有填充整个宽度，只是文件元素的高度。

Answer 1

我发现了错误......

flexbox的问题在于，如果在display: flex的容器中有（角度）组件，加载时app-samplecomponent标记仍然存在并干扰flexbox来完成它的工作。< / p>