Überlauf x Achse funktioniert nicht

Question

Ich versuche innere verschachtelte Elemente in einem übergeordneten Wrapper zu verbergen, damit der Wrapper horizontal scrollen kann, um die versteckten Elemente anzuzeigen. Hier ist ein JSbin.

.wrapper { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 20px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    border: thin dotted; 
 
} 
 
span { 
 
    margin: 0 10px; 
 
    display: inline-block; 
 
}

<section class="wrapper"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
</section>

Answer 1

Sie können white-space: nowrap nur in den .wrapper

.wrapper { 
 
    width: 150px; 
 
    overflow-x: scroll; 
 
    border: thin dotted; 
 
    white-space: nowrap; 
 
} 
 
span { 
 
    margin: 0 10px; 
 
}

<section class="wrapper"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
</section>

Answer 2

versuchen overflow-x: auto; statt overflow-x: scroll;