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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -