chrome，溢出：每当显示垂直滚动条时自动显示水平滚动条

Question

我有一种情况，我使用 max-width 和 max-height，每当内部内容越过 max-height 垂直滚动条时应该显示，并且每当内部内容越过 max-width 水平滚动条时应该显示。

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

我尝试使用不同的 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: 将所有内容都转换为 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>