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

Question

I will start this question with a snippet showing almost what I am trying to 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">
      I am 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 you can see I have a .sidebar (left), .content (right).

The problem is that I want to have the horizontal scrollbar on .content always visible, even when the body is not vertical scrolled to the bottom.

As you can see on the pictures, when at the top of the body-scrollbar, there are no visible scrollbar on .content

Current result

Expected result

Answer 1

You can make sure the scrollbar is always visible at the bottom of the page by setting the height of the container.

.wrapper {
  overflow: hidden;
  display: flex;
}

.sidebar {
  min-width: 200px;
  background: #333;
  color: #FFF;
}

.container {
  flex: 1;
  overflow-x: scroll;
  height: 92vh;
}

.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">
        I am 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>

Note that I set the height to 92vh. I could not use 100vh since that would hide the scrollbar partially due to the margin that's automatically added to the body of the snippets