Почему "fill: block" & "width: auto" не растягивает кнопку, чтобы заполнить контейнер?

Когда я устанавливаю кнопки display: block; и width: auto; на кнопку, я ожидаю, что кнопка растянется, чтобы заполнить контейнер, как это делают другие элементы блока. По какой-то причине это не так, по крайней мере, не в последнем Chrome.

Когда Googling вокруг, я нашел много людей, задающих один и тот же вопрос, которые были удовлетворены ответом на "Как я растягиваю свои кнопки, чтобы заполнить контейнер?" Это не, что меня интересует. (Я отлично могу растянуть мои кнопки, как мне нужно.) Проверка свойств кнопок, в том числе те, которые были введены по умолчанию браузером, не помогли меня тоже.

Я хотел бы понять, что заставляет кнопки игнорировать display: block; width: auto; и оставаться горизонтально по их содержанию.

Вот демонстрация того, что я имею в виду:

button {
  display: block;
}
<button style="width: auto;">button with `display:block; width:auto;`</button>
<button style="width: 100%;">button with `display:block; width:100%`</button>

Ответы

Ответ 1

(Бесстыдная копия ответа на этот источник и возможное повторение, в котором извлечена информация из этой статьи.)

Существует несколько элементов (<input>, <select>, <button>, <img>, <object> и <textarea>), которые считаются замененными элементами, внешний вид и размеры которых определяются внешним ресурсом. (например, операционная система, плагин и т.д.).

Заменяемые элементы могут иметь внутренние размеры - значения ширины и высоты, которые определяются самим элементом, а не его окружением в документе. Например, если элемент изображения имеет ширину, установленную на auto, будет использоваться ширина файла связанного изображения. Внутренние измерения также определяют внутреннее соотношение, которое используется для определения вычисленных размеров элемента, если указывается только одно измерение. Например, если для элемента изображения указана только ширина, скажем, 100 пикселей, а фактическое изображение имеет ширину 200 пикселей и высоту 100 пикселей, высота элемента будет масштабирована на ту же величину, до 50 пикселей.

Замененные элементы могут также иметь визуальные требования к форматированию, налагаемые элементом, вне контроля CSS; Например, элементы управления пользовательского интерфейса отображаются для элементов формы.

С HTML5 у вас есть еще пара таких как <audio> и <canvas> и некоторые другие.

Обратите внимание, что - как вы увидите в обсуждениях в комментариях - button самом деле не является замененным элементом, определенным w3c. Однако он ведет себя как один, который обсуждается далее в этой статье.