私はどうすればよいオーバーフロー-yが：-Xオーバーフローの子にスクロール：スクロール

Question

I持って次のマークアップとCSS：

https://jsfiddle.net/f0u9kpkb/

キー部は、次のとおりです。

.grid { 
    border: 1px solid #bdbdbd; 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: auto; 
    height: 200px; 
} 

.grid .grid-body { 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: visible; 
    overflow-y: auto; 
} 

私のコードでは、外側のdivには水平スクロールバーが生成され、内側のdivにはオーバーフローする垂直スクロールバーが生成されますが、この例では2つの水平スクロールバーが表示されます（overflow-x： ）

私はあなたが私はここで起こって見ることができる問題のカップルを持っているw3schools.com

にoverflow propertyを確認してください

Answer 1

を探しています効果を達成する方法はあります。最初は、実際にスクロールするためにテーブルに行を追加する必要があるかもしれません（それは私のモニターにはなかった）。

.gridクラスのオーバーフロープロパティを2回定義しています。一度ここ

：

.grid { 
    border: 1px solid #bdbdbd; 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: auto; 
    height: 200px; 
} 

しかし、その後、あなたがこのクラスを持っている：

.grid-体クラスだけでなく、 .gridないだけのプロパティを変更する

.grid .grid-body { 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: visible; 
    overflow-y: auto; 
} 

クラス

このクラスからオーバーフロープロパティを削除し、別のスタイルを追加しましたe .grid-bodyクラスのみですので、.gridクラスのプロパティをオーバーライドしません。

.grid-body { 
    overflow-x: hidden; 
    overflow-y: visible; 
} 

さらにテーブルをテーブルに追加しました。これにより、内部divの垂直スクロールと外側divの水平divの動作が要求されます。 See my JSFiddle。

あなたは見た目で遊びたいかもしれません。私はthis JSFiddleのように、外側divsのオーバーフローをoverflow: autoに設定し、内側divsをoverflow: visibleにオーバーフローさせることをお勧めします。

Answer 2

あなたは .grid .grid-bodyクラスに right:0 CSSを追加する必要が

そして

は、新しいクラスに.fix-position{ top:auto; position:fixed; }

を追加しました私のJsFiddle

を確認してくださいすべての問題がある場合、私に知らせてください。