scroll rows

by hamzeen hameem

HTML

<body>
  <div style="width: 400px;height:300px;background: rgba(0,0,0,.3);margin:0 auto;" id="row-main">
    Main Row
  </div>

  <div id="bottom-bar">
      <div id="wrapper">
          <div class="linkscard">
            hhhhhh<br/>
            hhhhh<br/>
            hhhhhh<br/>
          </div>
          <div class="linkscard">
            hhhhhh<br/>hhhhh<br/>hhhhhh<br/>
            hhhhhh<br/>hhhhh<br/>hhhhhh<br/>
            hhhhhh<br/>hhhhh<br/>hhhhhh<br/>
          </div>
          <div class="linkscard">
            hhhhhh<br/>hhhhh<br/>hhhhhh<br/>hhhhhh<br/>hhhhh<br/>
            hhhhhh<br/>hhhhhh<br/>hhhhh<br/>hhhhhh<br/>hhhhhh<br/>
            hhhhh<br/>hhhhhh<br/>hhhhhh<br/>hhhhh<br/>hhhhhh<br/>
          </div>
      </div>
  </div>
</body>

CSS

* {
    margin:0;
    padding: 0;
    color: rgba(220,220,220,.9);
  }
  html,body {
    /*overflow-x: scroll;*/
    min-width: 900px;
  }
  body {
    background: url(background.jpg);
    background-size:cover;
  }

  #wrapper {
    width: 900px;
    display: flex;
    margin: 0 auto;
  }

  #bottom-bar {
    background-color: rgba(0,0,0,.5);
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: scroll;
  }

  .linkscard {
    background-color: rgba(0,0,0,.8);
    float: left;
    width: 298px;
    margin-left: 1px;
    margin-right: 1px;
    padding: 20px;
  }