CODEWITHSUNDEEP
htmlcssgoogle-chromeoverflow
wallop
wallop

Reputation: 2581

chrome, overflow: auto shows horizontal scroll bar whenever vertical scroll bar is shown

I have a situation where i use max-width and max-height, whenever inner-content crosses max-height vertical scroll bar should be shown and whenever inner content crosses max-width horizontal scroll bar should be shown.

In the below scenario, horizontal scroll bar is shown whenever a vertical scrollbar appears even when inner content does not cross max-width.

I tried using different box-sizing value since it looks like the vertical scroll bar takes up part of the width making horizontal scroll bar appear, still it did not help.

.p {
  position: absolute;
  max-width: 200px;
  max-height: 400px;
  overflow: auto;
  border: 1px solid red;
}

.c {
  position: relative; 
  height: 500px;
  border: 1px solid blue;
}



<div class="p">
    <div class="c">
      vhjjujfhjsdfd
    </div>
  </div>

JSBIN

Upvotes: 3

Views: 2636

Answers (1)

koolhuman
koolhuman

Reputation: 1651

1) you can use
<div style="width:100px;height:100px;overflow:scroll;"></div>

This will set scroll bars permanently. But if you want to show scroll bars only when the height /width is more than specified then use "overflow:auto" as -

<div style="width:100px;height:100px;overflow:auto;">

2) because your word is too long and does not break try adding word-break: break-all to class C

.p {
  position: absolute;
  max-width: 200px;
  max-height: 400px;
  overflow: auto;
  border: 1px solid red;
}

.c {
     position: relative; 
     height: 500px;
     border: 1px solid blue;
    word-break: break-all;
}



<div class="p">
    <div class="c">
      vhjjujfhjsdfd
    </div>
  </div>

Upvotes: -2

Related Questions