Button with absolute position doesn't stretch to full width - html

Question

Button element doesn't stretch to full parent width with left/right zero technique. It perfectly works for a tag but not for button. What am I missing?
The question is why left/right approach isn't working for button.
I know that I can use wrapper, calc() or flexbox. But it seems strange that old way doesn't work.
Fiddle
#container {
position: relative;
width: 400px;
height: 60px;
padding: 0 20px;
background: #ccc;
}
.button {
position: absolute;
left: 20px;
right: 20px;
height: 20px;
background: green;
color: white;
border: 1px solid #000;
}
a.button {
top: 0;
}
button.button {
top: 20px;
display: block;
}
button.button-full {
width: 100%;
top: 40px;
}
<div id="container">
<a class="button">Link button</a>
<button class="button">Button button</button>
<button class="button button-full">Button button</button>
</div>

Answer 1

You can set width:inherit on the button, but be aware that it won't work when box-sizing:border-box is set on the container, otherwise you will probably need width:calc(100% - paddings), also mentioned in the other answer.
button {
width: inherit;
}

Answer 2

you can add button width to 100% so that it will be 100% of its parent container.
.button {
position: absolute;
left: 0;
right: 0;
**width: 100%;**
background: green;
color: white;
border: 1px solid #000;
}

Answer 3

Add width: calc(); to the .button as in
a.button {
top: 0;
width: calc();
}
This will stretch it to 100% and retain your padding of the parent element.

Answer 4

Your button is overflowing the parent since your button is absolute and has left of 20px.
There is no need to compensate for the parent padding.
Change left left: 0px; or remove position: absolute;.
.button{
position: absolute;
left: 0px;
...
}
I would rather be removing position: absolute;