Machen Flexbox Grid eine horizontale Bildlaufleiste auf Handy

Question

Ich versuche herauszufinden, wie Sie eine Tabelle haben eine untere horizontale Bildlaufleiste. Das ist mein HTML:

<div class="grid-block table"> 
    <div class="grid-block header"> 
    <div class="grid-block small-2 column"> 
     times 6 
    </div> 
    </div> 
    <div class="grid-block row"> 
    <div class="grid-block small-2 column"> 
     times 6 
    </div> 
    </div> 
</div> 

Ich habe dieses CSS verwendet, denke, dass es mein Problem beheben würde.

Ich habe die wichtigen Punkte im Moment nur hinzugefügt, um sicherzustellen, dass diese Stylings angewendet werden.

Ich sollte auch darauf hinweisen, dass jedes Element hier ein Flex-Element ist.

Prost

Answer 1

Dieser Code könnte Ihnen den Einstieg erleichtern.

.wrapper { 
 
    width: 100%; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    font-size: 0; 
 
} 
 
.wrapper .child { 
 
    font-size: 1rem; 
 
    height: 50px; 
 
    width: 60px; 
 
    display: inline-block; 
 
    background-color: cornflowerblue; 
 
    text-align: center; 
 
    border: 1px solid coral; 
 
    margin-left: 10px; 
 
} 
 
.wrapper .child:first-child { 
 
    margin-left: 0px; 
 
}

<div class="wrapper"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
    <div class="child">5</div> 
 
    <div class="child">6</div> 
 
    <div class="child">7</div> 
 
    <div class="child">8</div> 
 
    <div class="child">9</div> 
 
    <div class="child">10</div> 
 
</div>