为什么我的flexbox <a> grow to full width, whereas my flexbox button stays small?

Question

When I set display: flex on my <a>, it looks just like I want:

.container {
  display: flex;
  box-sizing: content-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #333;
  background: white;
}

.firstchild {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 15px;
}

.firstgrandchild {
  display: inline-block;
}

  <a class="container">
    <span class="first">
      <span class="firstchild">First - child</span>
    </span>
    <p class="second">Second</p>
  </a>

Turning on Firefox's flexbox highlighter shows that it renders like I want: two items separated by a small margin, and the container growing to the full width on the right side:

但是，如果我现在将<a>更改为<button>，它会突然崩溃，并且第一个大孩子会跳出第一个孩子：

.container {
  display: flex;
  box-sizing: content-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #333;
  background: white;
}

.firstchild {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 15px;
}

.firstgrandchild {
  display: inline-block;
}

  <button class="container">
    <span class="firstchild">
      <span class="firstgrandchild">First child - first grand child</span>
    </span>
    <p class="secondchild">Second child</p>
  </button>

为什么会这样？我需要在按钮上添加什么样式以使其与锚点相同？