title: Angular Material - Why is my md-button full-width?
body: <p>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.</p>
  
  <p>Can anyone with a bit of Angular Material knowledge see why? (Just resize the window pane to see the button)</p>
  
  <p>Here's my CodePen:</p>
  
  <p><a href="http://codepen.io/anon/pen/jPYNzy" rel="noreferrer">http://codepen.io/anon/pen/jPYNzy</a></p>
  
  <p>And the code:</p>
  
  <pre><code>&lt;!-- Container --&gt;
  &lt;div layout="column" layout-fill&gt;
      &lt;div layout="row" flex&gt;
  
          &lt;!-- Content --&gt;
          &lt;md-content flex&gt;
  
              &lt;md-toolbar&gt;
                  &lt;div class="md-toolbar-tools"&gt;
                      &lt;h1&gt;Title&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/md-toolbar&gt;
  
              &lt;div layout="column" class="md-padding"&gt;
                  &lt;p&gt;
                  The left sidenav will 'lock open' on a medium (&gt;=960px wide) device.
                  &lt;/p&gt;
                  &lt;md-button ng-click="toggleLeft()" hide-gt-md&gt;
                      Toggle left
                  &lt;/md-button&gt;
              &lt;/div&gt;
  
          &lt;/md-content&gt;&lt;!-- ./Content --&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- ./Container --&gt;
  </code></pre>