Set ionic v3 button height to take 100% height in a row

Question

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 this.

This is the relevant part in my home.html:

<ion-content  scroll="false">
  <section class = "home-container">
  <ion-row class="first-row">
    <ion-col>
      <button ion-button block>
          Button 1
      </button>
    </ion-col>
    <ion-col>
      <button ion-button block>
          Button 2
      </button>
    </ion-col>
  </ion-row>

  <ion-row class="second-row">
    <ion-col>
      <button ion-button block>
          Button 3
      </button>
    </ion-col>
    <ion-col>
      <button ion-button block>
          Button 4
      </button>
    </ion-col>
  </ion-row>
  </section>
</ion-content>

and my home.scss:

.home-container {
    display: -webkit-flex;
    flex-direction: column;
    height: 100%;
}

.home-container > .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%;
}

Answer 1

You should be able to achieve that with css only:

.home-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-container > .row {
    flex: 1;
    padding: 0;
}

.first-row {
    flex: 0.5 !important;
    background-color: #aeeeee;
}

.second-row {
    flex: 1.5 !important;
    background-color: #feeeee;
}

ion-col {
    display: flex;
    padding: 5px;
}

.button-md {
    height: auto;
}

Pay a special attention to:

1. ion-col { display: flex; }
2. .button-md { height: auto; }

Result:

(I used padding in the columns (ion-col), but you can remove if along with the button margins it you want the buttons occupying exactly 100% of the row).

Update

I tested in a Moto G2 (real device) with Android 6.0 and worked fine too: