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>

这将永久设置滚动条。但是，如果您只想在高度/宽度超过指定时显示滚动条，请使用＆＃34; overflow：auto＆＃34; as -

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

2）因为你的单词太长而且不会破坏尝试添加分词：全部到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>

chrome，overflow：显示垂直滚动条时自动显示水平滚动条

1 个答案: