title: Set ionic v3 button height to take 100% height in a row
body: <p>I'm developing an Android app with ionic framework v3, and I'm trying to get the buttons to take the 100% height of the row they are in, but I'm failing to do so. The result so far is 
  <a href="https://i.stack.imgur.com/NKx8i.png" rel="nofollow noreferrer">this</a>.</p>
  
  <p>This is the relevant part in my home.html:</p>
  
  <pre><code>&lt;ion-content  scroll="false"&gt;
    &lt;section class = "home-container"&gt;
    &lt;ion-row class="first-row"&gt;
      &lt;ion-col&gt;
        &lt;button ion-button block&gt;
            Button 1
        &lt;/button&gt;
      &lt;/ion-col&gt;
      &lt;ion-col&gt;
        &lt;button ion-button block&gt;
            Button 2
        &lt;/button&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  
    &lt;ion-row class="second-row"&gt;
      &lt;ion-col&gt;
        &lt;button ion-button block&gt;
            Button 3
        &lt;/button&gt;
      &lt;/ion-col&gt;
      &lt;ion-col&gt;
        &lt;button ion-button block&gt;
            Button 4
        &lt;/button&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
    &lt;/section&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>and my home.scss:</p>
  
  <pre><code>.home-container {
      display: -webkit-flex;
      flex-direction: column;
      height: 100%;
  }
  
  .home-container &gt; .row {
      flex: 1;
  }
  
  .first-row {
      flex: 0.5 !important;
      background-color: #aeeeee;
  }
  
  .second-row {
      flex: 1.5 !important;
      background-color: #feeeee;
  }
  
  .button-md {
      height: 100%;
  }
  </code></pre>