Why Doesn't "Display: Block" & "Width: Auto" Stretch a Button to Fill the Container

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

(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.

Why does display:block not stretch buttons or input elements

I think that a default value is assigned to the size attribute of inputs which means unless you specifically override it, your width won't be 100%

If you look at the firefox specification and scroll down to the section about size, you can see that they have a default value of 20

I'm not sure about the properties for the button that cause that not to be 100% width when changed to block

button with display:block not stretched

You can add padding to div container, and remove horizontal margin from buttons. Then you can apply width 100% to them:

<!DOCTYPE>
<html>
<head>
    <title>TEST</title>
    <style>
        button {
            display: block;
            width:100%;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div style="width: 100px; border: 1px solid black; padding:0 10px;">
        <button>hello</button>
        <button>hi</button>
    </div>
</body>
</html>

Demo: http://jsfiddle.net/xwt9T/1/

Make a button fill the whole width and (!) extend its container's size

Testing on Firefox 42 (which seems to be the only browser currently exhibiting this issue), my suggestion is to use min-width rather than width.

So in your example, change this declaration block should work:

div.btn1 button { min-width: 100% }

Here's an updated JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

Make a button fill the full width of container element?

Add the "box-sizing: border-box" property to all elements. The width and height properties include the padding and border, but not the margin. This will ensure your measurements across elements are correct and take into account the padding. display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element.

* {
    box-sizing: border-box
} 

.container {
    background-color: #ddd;
    padding: 10px;
    margin: 0 auto;
    max-width: 500px;
}

.button {
    background-color: #bbb;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

for more information on the box-sizing property, read the MDN docs.

button element display-property differently than a element

The reason why your button behaves differently is that a button is a so called "replaced element" whose (appearance and) dimension are defined by the operating system/browser. Anyhow I'ld suggest to use flex-box here.

.buttonRow {  display: flex;  flex-direction: column;}
.button {  margin: 0 auto 15px auto;  background-color: #ccad91;  color: white;  font-size: 18px;  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  padding: 17px 50px;  border-radius: 35px;  border: none;  outline: none;  text-decoration: none;}

<div class="buttonRow">  <button class="button">Proceed</button>  <a class="button" href="index.html">Cancel</a></div>

Button not staying fixed when resizing window with the image

I would add a container div around the two elements. Give that container div a position: relative; and set it's width and height. Now they both will correspond to their parent and scale properly.

Remove the style="left: 100vh" from the button.
Remove the bottom: 0;

Give the img a width and height of 100%;

Change the top: 0; to top: 50%; and add Translate-Y: (-50%);

Also I would recommend to give the img the object-fit: cover; and object-position: center; so it doesn't stretch the image.

See how I did that in the code snippet.

html,
body {
  background-color: #000028;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container{
  position: relative;
  width: 100%;
  height: 100%;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.button {
  position: fixed;
  top: 50%;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  height: 10%;
  width: 10%;
  overflow: hidden;
  z-index: 2;
  display: block;
}

<div class="container">

  <img src="https://images.unsplash.com/photo-1606228281437-dc226988dc3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />

  <input type="image" class="button submit" src="https://i.picsum.photos/id/95/200/300.jpg?hmac=XW2T1mpTuATtTLyDvkvdQqgh2nodO9Zudo3dH2aXCBA" alt="submit" />
  
</div>

Why Doesn't "Display: Block" & "Width: Auto" Stretch a Button to Fill the Container