Html 角度：Flexbox赢得'；t填充筛

我想了解Angular如何解释我的HTML和CSS代码。我一直使用的没有角度的布局似乎崩溃了

简单示例：我尝试创建一个固定高度的标题div，后面是一个填充剩余空间的主体div

它在普通HTML/CSS中工作：

HTML:

---

在Angular中，没有显示任何内容（可能是因为Angular在flex容器和flex项之间插入了空的app root组件包装元素）：

是的，display:flex应用于body元素的直接子元素，在这种情况下，它不是您的div，而是app root标记

<div id='mainCont'></div>
<div id='bodyCont'></div>

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-flow: column;
    align-items: stretch;
}

#mainCont {
    background-color: blue;
    flex: 0 0 1.8cm;
    min-width: 970px;
}

#bodyCont {
    background-color: green;
    flex: 1 1 auto;
}