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

Question

Sample HTML/CSS:

    
    



div.container         


        

Answer 1

I have some findings on newly HTML spec:

1. elements are non-replaced elements.

   MDN:replaced element

2. should adjust the width according to its size attribute by default, if it does not have size attribute (unlimited input length), adjust width with 20 characters:

   HTML 5.2:The input element as a text entry widget

   HTML Living Standard:The input element as a text entry widget

   If an input element whose type attribute is in one of the above states(Text, Search, Telephone, URL, or E-mail) has a size attribute, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error, then the user agent is expected to use the attribute as a presentational hint for the 'width' property on the element, with the value obtained from applying the converting a character width to pixels algorithm to the value of the attribute.

   If an input element whose type attribute is in one of the above states does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'width' property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.