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

【问题标题】：scrollbar is not in visible area (width more than 100%)滚动条不在可见区域（宽度超过 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>

【问题讨论】：

标签： html css html-table scroll scrollbar

【解决方案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>

【讨论】：