Flex: button as flex item cannot make its child fill itself

by jimousse

HTML

<div class="parent">
  <button class="mybutton">
    <div class="buttonchild">
      I'm inside a button!
    </div>
  </button>
</div>

CSS

.mybutton {
  flex-grow: 1;
  background: lightblue;
}

.parent {
  background: purple;
  height: 200px;
  width: 100px;
  display: flex;
}

.buttonchild {
  height: -webkit-fill-available;
  background: salmon;
}