伸缩方向元素的宽度

Question

我不知道为什么通过将flex-direction设置为column来使我的元素内部的宽度变为100％？我只想使其垂直，但不宽。我可以在不将元素包装在其他div中的情况下进行操作吗？请看下面的例子：

<button class="button">Good width</button>
<div class="flex-content">
  <button class="button">Wrong width</button>
</div>

.button {
  height: 36px;
}

.flex-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  border: 1px solid red;
}

https://codepen.io/anon/pen/QzGQQm

致谢