CSS Chrome : Cannot hide scrollbar automatically

Question

See this code :

html{position:relative;min-height:100%;}

and

<div style="width:100%;height:100%;overflow:auto;">
    <div id="main" style="width:200px;max-height:100px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

In addition, Textarea scrollbar and resize grabber cannot hiding too.

How can I fix it using CSS?

in Chrome(MacOS). But Safari works well.

This code is example for quick understanding.

The contents are large enough to require scrollbar.

UPDATE : https://jsfiddle.net/xu3q4m4w/9/

I guess This problem is relates to LINK.

I think it better if you use the max-width + width with large content to make it responsive as I mentioned in my answer. Never use width:1500px in this case — Herman Nz
– Herman Nz, Commented Feb 4, 2016 at 7:03

Herman Nz · Accepted Answer · 2016-02-04 07:05:17Z

2

height set into 100% create scroll bar. Try to fix into max-height:100%.
as well as width. you should set into width:100% or max-width:100% to get full width, not in pixel.

UPDATED:

<div style="width:100%;height:100%;overflow:auto;">
    <div id="main" style="max-width:1500px;height:200px;">

    </div>
</div>

jsfiddle

edited Feb 4, 2016 at 7:05

answered Feb 4, 2016 at 6:53

Herman Nz

2,2613 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amuzr · Accepted Answer · 2016-02-04 08:35:15Z

1

I figure out this problem. It Happen by only old chrome version (48.0.2564.97)

Now fix it. (48.0.2564.103 )

Thank you for answer.

answered Feb 4, 2016 at 8:35

Amuzr

10610 bronze badges

Comments

Tanmay · Accepted Answer · 2016-02-04 06:54:54Z

0

use this fiddle overflow-x:hidden

<div style="width:100%;height:100%;overflow:auto;overflow-x:hidden;">
    <div id="main" style="width:1500px;height:200px;">

    </div>
</div>

Link

answered Feb 4, 2016 at 6:54

Tanmay

5888 silver badges20 bronze badges

1 Comment

Amuzr Over a year ago

content should be shown. overflow-x:hidden is incorrect way.

Collectives™ on Stack Overflow

CSS Chrome : Cannot hide scrollbar automatically

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related