chrome scrollbar behavior different on mac vs windows

Question

Working on a grid-layout and I've run into a roadblock with css scrollbars differing between windows/mac.

Notice the scrollbar is to the right and away from the actual row. Now on windows, I see

Why is it that windows pushes the divs in the row to the next line? What is the best way to fix this?

General format in html is:

<div class="diamond-stat-body">
   <div class="diamond-row">
      <div class="diamond-block diamond-stat-block">
      </div>
      <div class="diamond-block diamond-stat-block"> 
      </div>
      ...
   </div>
   ....
 </div>

and the corresponding css ...

.diamond-stat-block{
  width: 125px;
  height: 2.5em;
  padding: .5em;
}

.diamond-block{
  border: .1em solid white;
  border-radius: 2px;
  background-color: #ddd;
  padding: 1em;
  display: inline-block;
  float: left;
 }

.diamond-row{
  height: 2.5em;
}

.diamond-body{
  width: 480px;
  height: 30%;
  overflow-y: scroll; 
  margin: 0em auto;
}

Answer 1

Why don't you use an actual <table>?

If you don't want to do that, then what about using display: table; and display: table-cell;?

I haven't tested it, so I don't know whether that will fix your problem.