CODEWITHSUNDEEP
htmlcssgoogle-chrome
mark
mark

Reputation: 62734

What causes the horizontal scrollbar to appear on Chrome in the following most trivial HTML?

HTML:

<html>

  <body>
    <div>
      <input type="text">
    </div>
  </body>

</html>

CSS:

 body {
   font:13px/1.231 arial;
 }
 input {
   font:99% arial;
 }
 div {
   display: inline-block;
   overflow: auto;
 }
 input {
   width: 15em;
 }

The result on Chrome:

enter image description here

The jsFiddle - http://jsfiddle.net/XBvWb/18/

Note that neither FF nor IE9 show this scrollbar.

Can anyone enlighten me, please, what is going on?

EDIT

Removed the input border, padding and margin - http://jsfiddle.net/XBvWb/41/

Upvotes: 7

Views: 11814

Answers (4)

phocks
phocks

Reputation: 3273

I have a similar issue where a horizontal scroll box is appearing in Chrome but not Firefox.

If your site (like most sites) does not use horizontal scroll, you can fix this issue by simply hiding all overflow on the x axis like this:

body {
  overflow-x:hidden;
}

Note: or you could set it on the html tag too. Not sure which is better.

Upvotes: 0

dave
dave

Reputation: 4104

My guess is that Chrome has a problem with rounding.

If you use any value of px for the inputs width the scrollbar disappears. Same when you change the inputs font-size to 100% (which equals exactly 13px in this example).

The current width of the input is 15 * 99% * 13px = 193.05px

I think the .05px let the scrollbar appear.

That also clarifies why the scrollbar disappears for widths of around 11em. It just rounds up in manner Chrome can handle better.

Upvotes: 10

Chris Montgomery
Chris Montgomery

Reputation: 2354

the following line is causing the extra scroll bar:

overflow: auto;

you could also just leave it and add an explicit width to the div:

width: 100%;

or make the div a block level element

display:block

Basically you're never supposed to put a block level element inside an inline-block level element.

Upvotes: 1

Clinton Green
Clinton Green

Reputation: 9977

overflow:auto forces a scrollbar if the content is clipped. Your width: 15em on the input is causing the content to be clipped thus forcing a scrollbar to appear.

Upvotes: 1

Related Questions