javascript - Making horizontal scrollbar always visible even if bottom is out of view -

i start question snippet showing trying accomplish.

.wrapper {    overflow: hidden;    display: flex;  }    .sidebar {    min-width: 200px;    background: #333;    color: #fff;  }    .container {    flex: 1;    overflow-x: scroll;  }    .long {    width: 2000px;  }    .header {   background: #666;  }

<div class="wrapper">      <div class="sidebar">      sidebar    </div>      <div class="container">      <div class="header long">        header      </div>      <div class="content">      <div class="long">        long      </div>        long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>      </div>        </div>  </div>

as can see have .sidebar (left), .content (right).

the problem want have horizontal scrollbar on .content visible, when body not vertical scrolled bottom.

as can see on pictures, when @ top of body-scrollbar, there no visible scrollbar on .content

current result

expected result

this works may create other issues page. since position absolute used.

    .wrapper {        position: absolute;        top: 0;        left: 0;        right: 0;        bottom: 0;      }      .sidebar {        position: absolute;        top:0;        left: 0;        bottom:0;        width: 200px;        background: #333;        color: #fff;      }        .container {        position: absolute;        top: 0;        left: 200px;        right:0;        bottom:0;        overflow-x: scroll;      }      .long {        width: 2000px;      }      .header {         background: #666;      }

 <div class="wrapper">      <div class="sidebar">      sidebar    </div>      <div class="container">      <div class="header long">        header      </div>      <div class="content">      <div class="long">        long      </div>        long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>long text<br/>      </div>      </div>  </div>