Angular: Flexbox 不会填满屏幕

Question

我想了解 Angular 如何解释我的 HTML 和 CSS 代码。我在没有 Angular 的情况下使用的布局似乎崩溃了。

简单示例：我正在尝试创建一个固定高度 header div，然后是一个 body div 来填充剩余的 space。

它适用于原版 HTML/CSS：https://jsfiddle.net/d4Lmbk2q/1/

HTML:

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

CSS:

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;
}

在 Angular 中什么也没有显示（大概是因为 Angular 在 flex 容器和 flex 项目之间插入了空的 app-root 组件包装器元素？）：https://codesandbox.io/s/beautiful-pike-u7hbl?file=/src/app/app.component.css

Answer 1

是的，display:flex 适用于 body 元素的直接子元素，在本例中不是您的 div，而是 app-root 标签

Angular: Flexbox 不会填满屏幕

Angular: Flexbox Won't Fill Screen

html

css

frontend

web-frontend

angular