html - 弯曲方向元素宽度

Question

我不知道为什么通过将 flex-direction 设置为列我的元素内部的宽度为 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

问候

标签： htmlcssflexbox