Flex CSS resulting in different behavior than flex properties

Question

I'm trying to create a sticky footer with angular material and flexbox. It looks like I have succeeded using flex-grow: 1 !important; on my main content element, but it only works as long as I use that code on the element with a style="" property. Other options to apply the same rules do not work:

Applying the CSS in an external file (even with !important)
Applying the CSS in a style element (even with !important)
Using flex properties in the element like flex="none" flex-grow"1"

It looks like either angularJS or Angular Material overrides my settings except for the style="" property. How can I change this behavior?

I'm suspecting the Angular Material javascript to set my flex-grow property to 0, while I want it to be 1, because the property is always at 0 on page load, no matter what I try with CSS and flex properties. Am I right? Is there a good reason for this?

EDIT: I have found multiple examples on how to create a sticky footer, but they all don't work for me. The single solution I have found is the one with a style property mentioned above and I would like a simpler solution.

For example, I cant get this one to work because it would set the flex-grow value to 0.

https://codepen.io/rscafi/pen/bNXRxY/

Michael Benjamin · Accepted Answer · 2017-04-02 22:13:02Z

1

I'm not sure why you would use flex: none and flex-grow: 1 in the same declaration.

flex: none breaks down to this:

flex-grow: 0
flex-shrink: 0
flex-basis: auto

Then you're overriding the flex-grow above with flex-grow: 1

You should just consolidate both rules. That would look like this: flex: 1 0 auto

edited Apr 2, 2017 at 22:13

answered Mar 19, 2017 at 23:05

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Robbert Kooiman Over a year ago

I realized that as soon as I posted the question. I see now that my solution works because it forces flex-grow: 1;. It still only works in a style property. EDIT: Nevermind. Your rule in combination with !important seems to work.

Robbert Kooiman Over a year ago

Thanks for explaining that flex-grow is part of flex, I didn't know that yet. Your solution works in separate CSS without the !important tag, and that's all I wanted. It seems flex has some funky interactions when you override rules in the same element, but that's not unacceptable.

Michael Benjamin Over a year ago

The flex property is shorthand for: flex-grow, flex-shrink, flex-basis.

Robbert Kooiman Over a year ago

My main element looked like this: <main class="md-padding" layout="row" style="flex:none; flex-grow:1;">. That worked, and the same ruleset of flex defined in any other location wouldn't work. But your answer is basically the correct way of defining what I was trying to do, and your rule works in every way I need it to.

Collectives™ on Stack Overflow

Flex CSS resulting in different behavior than flex properties

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related