Search code examples
htmlcssangularfrontendweb-frontend

Angular: Flexbox Won't Fill Screen

I'd like to understand how Angular interprets my HTML and CSS code. Layouts that I've been using without Angular seem to break down.

Simple Example: I am trying to create a fixed height header div followed by a body div that fills the remaining space.

It works in vanilla 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;
}

In Angular, nothing shows up (presumably because Angular inserts the empty app-root component wrapper element between the flex container and the flex items?): https://codesandbox.io/s/beautiful-pike-u7hbl?file=/src/app/app.component.css

Solution

  • Yes, the display:flex applies to the direct children of body element which in this case are not your divs but app-root tag