HTML. CSS. FlexBox. Кнопки не ведут как флекс контейнеры

Я ожидаю, что когда задаю свойство display:flex то элемент будет иметь ширину в 100% своего родителя. А его вложенные элементы будут иметь ширину в свой контент. Но когда я задаю свойство display:flex элементу button. То он не растягивается как блочный элемент. А если я задаю элементу span, то его ширина становится на всю строку. Почему с кнопкой не так? Сниппет ниже посмотрите через Google DevTools. Вы увидите что у кнопок нету фиолетового цвета, а у других есть

div {
  display: flex;
}

button {
  display: flex;
}

span {
  display: flex;
}

<div>
  1
</div>
<button>
1
</button>
<br/>
<button>
1
</button>
<br/>
<span>
  1
</span>