在水平内容溢出的情况下，如何使垂直滚动条停留在视口中？

Question

我有一个页面，列表顶部有单独的标题。列表数量是动态的，可以水平溢出。 X滚动将滚动整个页面。垂直滚动列表应使标头固定在顶部。

我不希望y滚动条随列表的宽度向右移动，而是始终在屏幕的右边缘可见。我该如何实现？
问题似乎是x溢出以及列表和标题（以及其他）的必要对齐。

我探索过的替代方法：将滚动条翻转到左侧（不理想）。

小提琴：https://jsfiddle.net/planta/1e6bxc4o/56/

.header-wrapper {
  display: flex;
  background: whitesmoke;
  text-align: center;
}

.lists-wrapper {
  display: flex;
  background: whitesmoke;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 80%;
  width: 100%;
}

.header {
  min-width: 200px;
  border-bottom: 1px solid grey;
}

.list {
  min-width: 200px;
  border-right: 1px solid lightgrey;
  border-bottom: 3px solid orange;
  background: steelblue;
  color: white;
  height: 1000px;
}

.outer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden;
  overflow-x: scroll;
  position: absolute;
}

.intermediate {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

<div class="outer">

  <div class="intermediate">

  <div class="header-wrapper">

    <div class="header">
      <span>Title 1</span>
    </div>

    <div class="header">
      <span>Title 2</span>
    </div>

    <div class="header">
      <span>Title 3</span>
    </div>

    <div class="header">
      <span>Title 4</span>
    </div>

    <div class="header">
      <span>Title 5</span>
    </div>

    <div class="header">
      <span>Title 6</span>
    </div>

    <div class="header">
      <span>Title 7</span>
    </div>

  </div>
  <div class="lists-wrapper">

    <div class="list">
      content 1
    </div>

    <div class="list">
      content 2
    </div>

    <div class="list">
      content 3
    </div>

    <div class="list">
      content 4
    </div>

    <div class="list">
      content 5
    </div>

    <div class="list">
      content 6
    </div>

    <div class="list">
      content 7
    </div>

  </div>

</div>

</div>

Answer 1

1-将overlow-y值更改为可见，并删除overflow-x属性。

   .list-wrapper {
      overflow-y: visible;
    }

2-然后，将溢出y值更改为自动。

 .outer {
      overflow-y: auto;
    }