title: Two fixed size columns in 3 column layout in AngularJS Material
body: <p>I have a question similar to this one <a href="https://stackoverflow.com/questions/23794713/flexbox-two-fixed-width-columns-one-flexible">Flexbox - two fixed width columns, one flexible</a></p>
  
  <p>But that one is about doing it using just Flexbox.  I'm trying to use AngularJS Material.  I want my left and right divs to be a fixed 28px width, and the center div to flex.</p>
  
  <p>Something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div layout="row" layout-margin&gt;
    &lt;!-- Alphabet - First Half --&gt;
    &lt;div flex="28px"&gt;
      &lt;md-list&gt;
        &lt;md-list-item&gt;
          &lt;md-button class="md-fab md-mini"&gt;
            &lt;div align="center"&gt;A&lt;/div&gt;
          &lt;/md-button&gt;
        &lt;/md-list-item&gt;
      &lt;/md-list&gt;
    &lt;/div&gt;
  
    &lt;div flex&gt;
      &lt;md-content&gt;&lt;/md-content&gt;
    &lt;/div&gt;
  
    &lt;!-- Alphabet - Second Half --&gt;
    &lt;div flex="28px"&gt;
      &lt;md-list&gt;
        &lt;md-list-item&gt;
          &lt;md-button class="md-fab md-mini"&gt;
            &lt;div align="center"&gt;N&lt;/div&gt;
          &lt;/md-button&gt;
        &lt;/md-list-item&gt;
      &lt;/md-list&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>