Javascript 使水平滚动条始终可见，即使底部不可见

我将以一个片段来开始这个问题，这个片段几乎展示了我试图完成的任务

.wrapper{
溢出：隐藏；
显示器：flex；
}
.侧边栏{
最小宽度：200px；
背景：#333；
颜色：#FFF；
}
.集装箱{
弹性：1；
溢出-x：滚动；
}
.朗{
宽度：2000px；
}
.标题{
背景:#666；
}

边栏
标题
我很长
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本

.wrapper{
溢出：隐藏；
显示器：flex；
}
.侧边栏{
最小宽度：200px；
背景：#333；
颜色：#FFF；
}
.集装箱{
弹性：1；
溢出-x：滚动；
高度：95vh；
}
.内容{
宽度：2000px；
}
.标题{
背景:#666；
}

边栏
标题
我很长
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本

这是可行的，但也可能会给您的页面带来其他问题。 因为使用了绝对位置

.wrapper{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.侧边栏{
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：200px；
背景：#333；
颜色：#FFF；
}
.集装箱{
位置：绝对位置；
排名：0；
左：200px；
右：0；
底部：0；
溢出-x：滚动；
}
.朗{
宽度：2000px；
}
.标题{
背景:#666；
}

边栏
标题
我很长
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本

body, html {
  height: calc(100vh);
  overflow-x: scroll;
}

.element_with_minWidth {
   min-width: 1000px;
}

// Note I added z-index in case you can't reach the link due to another navbar on top. You can play with z-index if you need to. 
<div class="cool-shadow" style="z-index: 5;">
  <div class="scrollable-nav">
    <div class="container">
      <div class="some-class">
        <a href="#" class="navbar-item">Sports</a>
        <a href="#" class="navbar-item">News</a>
        <a href="#" class="navbar-item">Science</a>
        <a href="#" class="navbar-item">Programming</a>
        <a href="#" class="navbar-item">Bla Blah</a>
      </div>
    </div>
  </div>
</div>

.scrollable-nav {
  // First four are essential.
  display: block;
  width: 100%; 
  overflow-x: scroll;
  white-space: nowrap;
  // You can change these below if you'd like
  height: auto;
  padding: 10px;
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #2f3142;
  z-index: 5;
  
}

// Make sure the navbar-items are inline block.
.scrollable-nav .navbar-item {
  display: inline-block;
}

.scrollable-nav::-webkit-scrollbar:horizontal {
  height: 11px;
}

.scrollable-nav::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid green;
  /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, .5);
}
// This one is important.
.scrollable-nav::-webkit-scrollbar {
  -webkit-appearance: none;
}

/* 
.scrollable-nav::-webkit-scrollbar:horizontal {
  width: 11px; // This one is optional in case you wanna do this vertically too
} */