JSfiddleでオーバーフロープロパティが動作しますが、クロム/サファリでは動作しません

Question

div-boxの水平オーバーフロープロパティに苦労しています。コードはサファリ&クロムでは機能しませんが、JSfiddleに入力すると機能します。

何が間違っていますか？

ありがとうございます！

#box { 
 
    overflow: hidden; 
 
} 
 
#box1 { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: pink; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    position: relative; 
 
    white-space: nowrap; 
 
} 
 
#box2 { 
 
    width: 180px; 
 
    height: 380px; 
 
    margin: 10px; 
 
    background: black; 
 
    display: inline-block; 
 
}

<div id="box"> 
 
\t <div id="box1"> 
 
\t \t <div id="box2"></div> 
 
\t \t <div id="box2"></div> 
 
\t \t <div id="box2"></div> 
 
\t \t <div id="box2"></div> 
 
\t </div> 
 
</div>

Answer 1

私は本当にあなたの問題を取得いけない、私はクロム、Firefoxの、IEとエッジで同じ結果を得ます。

まず

#box { 
    overflow: hidden; 
} 

あなたはボックスを非表示にする場合、これは動作しません。代わりに＃box1にこのスタイルを適用し、既存のオーバーフロースタイルを削除します。

#box1 { 
    overflow: hidden; 
} 

セカンド

次の2つの要素のオーバーフロー特性を有する：たぶん、これが問題を引き起こしている

#box { 
    overflow: hidden; 
} 

と

#box1 { 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

を、1つのオーバーフロースタイルを削除しておきますもう一方のオーバーフロースタイル。