Creating dynamic columns while columns are spaced equally and properly

I create my items by going through a loop in my template. these items have to be shown in columns which are evenly spaced. as i re-size my window i need the vertical scroll bar to appear. the issue right now is that some of the items on the top or the bottom will be cut off.

    <div class="reports">
      
          <div class="tlreport">
            
          </div>
              
    </div>

and here is the styling i used:

  .reports{
  height:100%;
  max-height: 600px;
  overflow:auto;
  -moz-column-width: 250px;
  -webkit-column-width: 250px;
  column-width: 250px;
  columns: 250px;
}
.tlreport {
float: left;
  width: 250px;
  height:47px;
}