Angular Material - Why is my md-button full-width?

Question

Simple issue, I've made a really basic page to play around with Angular Material. I have a button which is visible on medium-sized devices which toggles the side navigation, and for some reason it is full width. There is no CSS which is making it full width, and there are no Material directives which are making it full width. It seems to have inherited the width of the container it's in, but I can't see why.

Can anyone with a bit of Angular Material knowledge see why? (Just resize the window pane to see the button)

Here's my CodePen:

http://codepen.io/anon/pen/jPYNzy

And the code:

<!-- Container -->
<div layout="column" layout-fill>
    <div layout="row" flex>

        <!-- Content -->
        <md-content flex>

            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h1>Title</h1>
                </div>
            </md-toolbar>

            <div layout="column" class="md-padding">
                <p>
                The left sidenav will 'lock open' on a medium (>=960px wide) device.
                </p>
                <md-button ng-click="toggleLeft()" hide-gt-md>
                    Toggle left
                </md-button>
            </div>

        </md-content><!-- ./Content -->

    </div>
</div><!-- ./Container -->

Answer 1

Just wrap it in another div if this is undesired. The flex-direction of <div layout="column"> seems to be responsible for the behavior.

Answer 2

An elements width defaults to 100% of it's container, unless specified otherwise.