Why doesn't "display: block" & "width: auto" stretch a button to fill the container? [duplicate]

Question

When I set display: block; and width: auto; on a button, I'd expect the button to stretch to fill the container as other block elements do. For some reason, it doesn't, at least not in latest Chrome.

When Googling around, I found a lot of people asking the same question, who were satisfied with an answer to "How do I stretch my buttons to fill the container?" That is not what I'm interested in. (I'm perfectly able to stretch my buttons any way I need.) Inspecting button properties, including the ones imposed by default by the browser didn't help me either.

I'd like to understand, what causes buttons to ignore display: block; width: auto; and stay horizontally sized based on their contents.

---

Here's a demonstration of what I mean:

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>

I'd expect the button with width:auto; to be stretched as well.

---

Just to be absolutely clear, this is not a duplicate to input with display:block is not a block, why not? or any similar question unless that has only answers describing ways to stretch the elements in question.

Edit: It might be a duplicate of What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container. On the other hand, that question doesn't mention buttons at all. You need to read the answer to find out it applies to buttons as well.

Answer 1

(Shameless copy of the answer at this source and possible dublicate, which extracted the information from this article.)

There are a few elements (<input>, <select>, <button>, <img>, <object>, and <textarea>) that are considered replaced elements whose appearance and dimensions are defined by an external resource. (e.g. the operating system, a plugin, etc).

Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.

Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.

With HTML5 you have a couple more of those like <audio> and <canvas> and some more.

Please note that - as you will see in the discussions in the comments - button is not really a replaced element defined by w3c. However it is behaving like one, which is discussed further in this article.