滚动条不在可见区域（宽度超过 100%）

Posted 2023-03-06

【中文标题】滚动条不在可见区域（宽度超过 100%）

【英文标题】：scrollbar is not in visible area (width more than 100%)

【发布时间】：2020-08-25 11:34:37

【问题描述】：

我有一个超过 100%（表格宽度）的 div。现在的问题是我看不到垂直滚动的滚动条，很明显。我可以调整滚动条的位置吗？

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


.container 
  border: 1px solid red;
  width: 100%;
  height: 250px;
  overflow: auto;


.abc 
  border: 1px solid green;
  height: 100%;
  width: calc(100% + 50px);
  overflow: auto;

<div class="container">
  <div class="abc">
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>    
  </div>
</div>

【参考方案1】：

考虑只在容器上设置overflow，如下面的sn-p：

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


/*.container 
  border: 1px solid red;
  width: 100%;
  height: 250px;
  overflow: auto;


.abc 
  border: 1px solid green;
  height: 100%;
  width: calc(100% + 50px);
  overflow: auto;
*/

.abc 
  width: calc(100% + 50px);
  height: 100%;


.container 
  width: 100%;
  height: 250px;
  overflow :auto;

<div class="container">
  <div class="abc">
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>
    abc<br>    
  </div>
</div>