HTML Button with responsive child

Question

Having issues with the sizing of a button with a responsively sized child, if I use a div it works fine and I'm looking to make the code work with a button rather than making the div handle the onClick actions.

I've got the following code, and the div sizes correctly based on the child but the button doesn't.

<div class="container">
  <div class="item"></div>
</div>

<button class="container">
  <div class="item"></div>
</button>

.container {
  border: 1px solid black;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 0;
  background: red;
}

.item::after {
  display: block;
  content: '';
  padding-top: 66.6%;
}

CodePen showing the issue.

Answer 1

Element div not allowed as child of element button in this context. For more explanation go through this link: stackoverflow