html - Chrome ，溢出 : auto shows horizontal scroll bar whenever vertical scroll bar is shown

Question

我有一种情况，我使用最大宽度和最大高度，每当内部内容穿过最大高度垂直滚动条时应该显示，每当内部内容穿过最大宽度水平滚动条时应该显示。

在下面的场景中，即使内部内容没有超过最大宽度，只要出现垂直滚动条，就会显示水平滚动条。

我尝试使用不同的 box-sizing 值，因为它看起来垂直滚动条占据了部分宽度，使水平滚动条出现，但仍然没有帮助。

.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

Answer 1

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

这将永久设置滚动条。但是，如果您只想在高度/宽度超过指定值时显示滚动条，请使用“overflow:auto”作为 -

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

2)因为你的话太长了，不打断试试加 word-break: break-all 到 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>