flex button child height not accepting 100 percent

[nirvparekh]

I am having following html markup

<button class="flex">
  <div class="flex-item">
    Click Me
  </div>
</button>

and css applied:

.flex {
  display: flex;
  width: 100%;
  height: 48px;
  background: black;
  flex-direction: row
}
.flex-item {
  height: 100%;
  background: grey
}

The problem is, parent node is <button> with flex-direction: row, child element does not accept height in percentage.
height in percentage only works if parent node is <div>

[eddsaura]

Why don't you just write on the contrary?

<div><button/></div>

Is there a reason?

Thanks for sharing