What Is It in the CSS/Dom That Prevents an Input Box with Display: Block from Expanding to the Size of Its Container

What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container

Alright, due to the clarification of the original question...I did some digging and found these laments and 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.

W3C's CSS 2.1 "Visual Formatting Model Details" section discusses the calculation of widths of both replaced and non-replaced elements.

Overall...pretty annoying for some form elements (<textarea>, <button>, and <input>). Can/will it change? Probably not any time soon...Until it does change at the core, we'll have to stick with the hacks :(

Strange behavior of an input html element with display: block

If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.

Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.

<div class="col-md-12">
  <div class="row"> <!--this is what you need -->

  </div>
</div>

full example code

<div class="col-md-12">
    <div class="row">
        <input type="text" placeholder='I\'m some damned input' />
    </div>
    <div class="row">
        <div>I am some div</div>
    </div>
</div>

Input with display:block is not a block, why not?

Check out what I came up with, a solution using the relatively unknown box-sizing:border-box style from CSS 3. This allows a 'true' 100% width on any element regardless of that elements' padding and/or borders.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

This solution supports Internet Explorer 6 and Internet Explorer 7 via a behaviour written by Erik Arvidsson with some tweaks from Dean Edwards to support percentage and other non-pixel widths.

Working example

Behaviour (boxsizing.htc)

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.

How do I make an input element occupy all remaining horizontal space?

See: http://jsfiddle.net/thirtydot/rQ3xG/466/

This works in IE7+ and all modern browsers.

.formLine {    overflow: hidden;    background: #ccc;}.formLine input {    width: 100%;}.formLine label {    float: left;}.formLine span {    display: block;    overflow: hidden;    padding: 0 5px;}.formLine button {    float: right;}.formLine input, .formLine button {    box-sizing: border-box;}

<div class="formLine">    <button>click me</button>    <label>some text.. </label>    <span><input type="text" /></span></div>

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.

Adjust width of input field to its input

It sounds like your expectation is that the style be applied dynamically to the width of the textbox based on the contents of the textbox. If so you will need some js to run on textbox contents changing, something like this:

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Note: this solution only works when every character is exactly 8px wide. You could use the CSS-Unit "ch" (characters) which represents the width of the character "0" in the chosen font. You can read about it here.

What Is It in the CSS/Dom That Prevents an Input Box with Display: Block from Expanding to the Size of Its Container