title: Align Card Buttons on bottom Material UI
body: <p>I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox.</p>
  
  <p>The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks).
  I am using the card from here -> <a href="https://material-ui.com/demos/cards/" rel="noreferrer">https://material-ui.com/demos/cards/</a></p>
  
  <p>I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with Bootstrap so i hope a CSS Master can help me out. I'll attach the pic below for ref.</p>
  
  <p><a href="https://i.stack.imgur.com/ODcUM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ODcUM.png" alt="enter image description here"></a></p>
  
  <p>Also for ref here's how my code looks in react( ApiPosts is my cards component) -> </p>
  
  <pre><code>                    &lt;Grid container&gt;
                          &lt;Grid item xs={12}&gt;
                              &lt;Paper className={classes.paper}&gt;
                                  &lt;Row className="rowSpacer"&gt;
                                      &lt;Col xs&gt;
                                          &lt;Typography variant="title" align="center" color="textPrimary" gutterBottom&gt;
                                              Posts are below
                              &lt;/Typography&gt;
                                      &lt;/Col&gt;
                                  &lt;/Row&gt;
                                  &lt;Divider /&gt;
                                  &lt;ApiPosts /&gt;
                              &lt;/Paper&gt;
  
  
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
  </code></pre>
  
  <p>And finally my cards are wrapped in <code>&lt;Row around="xs"&gt;</code> (4 posts in a row) and each card in a col <code>&lt;Col xs &gt;</code></p>
  
  <p>Thanks in advance!</p>
  
  <p>Edit: Solved thanks to Ivan's answer.Here's the code in case anyway needs it (working on Material-UI Cards).</p>
  
  <pre><code>.portCardCl {
      display: flex;
      flex-direction: column;
      height:100%;
  }
  
  .portBodyCl {
      display: flex;
      flex: 1 0 auto;
      align-items: flex-end;
      justify-content: center;
      flex-direction: column;
  }
  
  .portButCl{
      display: flex;
      justify-content: flex-start;
  }
  </code></pre>
  
  <p><code>portCardCl</code> goes on the first <code>&lt;Card&gt;</code>, <code>portBodyCl</code> goes on <code>&lt;CardActionArea&gt;</code> and finally <code>portButCl</code> goes on <code>&lt;CardActions&gt;</code></p>