Why is Google Chrome not respecting my display:inline-block property?

Question

I want to create a form in a DIV and I would like the DIV to be no bigger than the elements in the form. So I have crafted this as my DIV

    <div id="content">
      <div id="userNotificationForm">
<form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" />

  <div class="field">
    <label for="user_notification_price">Label</label> <span class="required">*</span> <br>
    <input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
  </div>

  <div class="actions buttonContainer">
    <input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" />
  </div>

</form>
</div>
</div>

and assigned it the "display:inline-block" property, thinking that would make the form as big as needed, and no bigger.

#userNotificationForm {
  background-color: #fff;
  display: inline-block;
  text-align: left;
}

This works fine on Mac Firefox -- https://jsfiddle.net/yj3cdvfy/ , but notice on Mac Chrome the text box bleeds over the edge of the form container (the white section). Ditto for Safari. How do I make the container include the textbox completely, as Firefox seems to do?

Answer 1

Your CSS does not specify any explicit width, neither for the form, nor for the div and input element. But the HTML markup specifies a size attribute for the input element which makes Chrome, Chromium and Internet Explorer 11 compute a width larger than the parent element's widht, so that the input field will overflow outside.

Specify a width: 100% (relative to its parent element) on input[type=text] to make it fit the form.

input[type=text] {
  width: 100%;
  /* ... */
}

Here is an updated fiddle that works in the current browsers (Chrome 60, Firefox 55, and Internet Explorer 11): https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/