flexboxで孫要素まで高さを揃える

HTML

<div class="flex">
  <div class="item">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
    文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
    <a href="#" class="button-01">more</a>
  </div>
  <div class="item">
    <p>この文章はダミーです。</p>
    <a href="#" class="button-01">more</a>
  </div>
  <div class="item">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
    <a href="#" class="button-01">more</a>
  </div>
</div>

CSS

.flex {
  display: flex;
}
.flex .item {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  width: calc((100% - 20px * 2) / 3);
}
.flex .item:nth-child(3n) {
  margin-right: 0;
}
.flex .item p {
  flex-grow: 1;
}
.flex .item a {
  margin: auto auto 0;
}