<!-- 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