Właściwość przepełnienia działa w JSfiddle, ale nie w chrome / safari - html, css, przepełnienie

Walczę z poziomą właściwością przepełnienia dla pola div. Kod nie działa na safari i chrome, ale działa, gdy wpisuję go w JSfiddle ...

Co ja robię źle?

Z góry dziękuję!

#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">
<div id="box1">
<div id="box2"></div>
<div id="box2"></div>
<div id="box2"></div>
<div id="box2"></div>
</div>
</div>

Odpowiedzi:

Naprawdę nie dostaję twojego problemu, otrzymuję ten sam wynik w chrome, firefox, IE i edge.

Pierwszy

#box {
overflow: hidden;
}

To nie działa, jeśli chcesz ukryć pola. Zastosuj ten styl na # box1 i usuń istniejący styl przepełnienia.

#box1 {
overflow: hidden;
}

druga

Masz właściwości przepełnienia na dwóch elementach:

#box {
overflow: hidden;
}

i

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

Może to powoduje problem, usuń jeden styl przepełnienia i zachowaj inny styl przepełnienia.