Angular Material: layout-fill not filling parent <div>

Question

<!-- Container Div -->
<div layout-fill>
    <!-- Image Div -->
    <div layout="column" layout-align="center center" class="coverImage" layout-fill>
        <md-content class="md-padding">
            Sample Text Here
        </md-content>
        <md-button class="md-raised md-primary">Sign Up</md-button>
    </div>
</div>

I have the above section of HTML, and I'm trying to use Angular Material's flexbox support to create a page that has a background image that is the full page. Overlayed on this image is some text and a button that is in the center of the image.

If I inspect the outermost div in chrome it's size is (as expected) the full screen. The image div for some reason does not do this. It only takes up enough space to contain the text and button. Any insights on why this is happening would be appreciated. I know that this can be done in several different ways using various css tricks but I would like to learn what im missing about how flex works.

Update
Link to JSFiddle

Answer 1

I guess the fundamental issue comes from using both layout-align and layout-fill in the same parent container.

Solutions

In short, there are 2 ways to overcome this:

1. Add a custom css rule on parent container with align-items: stretch;

2. Use only layout-fill (no layout-align on the parent container)

---

Reasons

Whenever using layout-* directive, angular-material would add a class to the element, and apply flex layout related styles there. For example:

<div class="parent" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1" flex>
  <div class="child child-2" flex="none">
</div>

Will be compiled to :

<div class="parent layout-fill layout-align-space-between-center layout-row" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1 flex" flex>
  <div class="child child-2 flex-none" flex="none">
</div>

And the resulting css would be:

.layout {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.layout-row {
    flex-direction: row;
}

.layout-align-space-between-center {
    align-items: center;
    align-content: center;
    max-width: 100%;
    justify-content: space-between;
}

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

As you can see here, layout-fill does not change anything in flex related-rules at all.

What we expect for a stretched flex item should leverage on align-items: stretch as mentioned in this A Complete Guide to Flexbox by CSS-tricks. But this simply is not the case for angular material implementation. And it make sense because align-item rule is already being used in layout-align-* as a way to position the item.

Examples

Check this codepen example to see how it works.