CODEWITHSUNDEEP
cssangularflexbox
Spitzbueb
Spitzbueb

Reputation: 5891

CSS flex property doesn't work with Angular 4

I have the following CSS style (in the global stylesheet):

#container {
    align-items: stretch;
    display: flex;
    flex: 1;
    margin: 1rem auto;
    max-width: 64rem;
    width: 100%;
}

In the plain HTML file, the container uses the full height of the window. In my Angular 4 project, however, the flex property has literally NO effect. Why is that so? And how can I solve this?

Here is a JSFiddle: jsfiddle

This is how it should work. But when I move the HTML template to angular (split specific CSS into component.css files and global styles like #container to the global stylesheet) it doesn't work anymore. The container doesn't fill the whole width and just files the height the element has.

Upvotes: 1

Views: 1041

Answers (1)

Spitzbueb
Spitzbueb

Reputation: 5891

I found the error...

The problem with flexbox is that if you have (angular) components in containers with display: flex, as they get loaded the app-samplecomponent tag remains and disturbs flexbox to do it's job.

Upvotes: 2

Related Questions