當水平內容溢出時，如何使垂直滾動條停留在視口中？

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值更改為visible ，然后刪除overflow-x屬性。

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

2-然后，將溢出y值更改為auto 。

 .outer {
      overflow-y: auto;
    }