html - Make flexbox grid have a horizontal scroll bar on mobile -
i'm trying figure out how make table have bottom horizontal scroll bar. 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>
i have used css thinking fix problem.
.table { overflow: auto !important; width: 1400px !important; }
i've added importants @ moment make sure these stylings applied.
i should point out every element here flex item.
cheers
this code might started.
.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>
Comments
Post a Comment