CODEWITHSUNDEEP
htmlcssangularfrontendweb-frontend
J. Grohmann
J. Grohmann

Reputation: 399

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

Upvotes: 0

Views: 666

Answers (2)

Tammibriggs
Tammibriggs

Reputation: 639

I fixed mine by adding a display of flex to the Angular element that's the direct child of the parent that was flexed. In your case it's app-root. Here is what it will look like:

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

app-root {
  display: flex;
}

Upvotes: 1

ihor.eth
ihor.eth

Reputation: 2420

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

Upvotes: 1

Related Questions