具有固定标题行的HTML div网格滚动条更改默认行的宽度

Question

我想创建一个没有table的数据网格，只使用div使用html和css。
这样做我坚持在标题行fixed和网格主体中的滚动条 到目前为止，我已经这样做了

.grid-body {
  background: #eee;
  width: 100%;
  font-family: 'Segoe UI';
  font-size: 0.9em;
}

.grid-body-main {
  overflow: auto;
  height: 100px;
}

.header-row {
  width: 100%;
  display: flex;
  background: #ddd;
}

.header-cell {
  width: 100%;
  border-right: solid thin #444;
  padding: 3px 10px;
  font-size: 1em;
  min-width: 150px;
}

.default-row {
  display: flex;
}

.default-cell {
  width: 100%;
  border-right: dotted thin #444;
  padding: 3px 10px;
  min-width: 150px;
  word-wrap: break-word;
}

<div class="grid-body">
  <div class="header-row">
    <div class="header-cell">
      ID
    </div>
    <div class="header-cell">
      Name
    </div>
    <div class="header-cell">
      Username
    </div>
    <div class="header-cell">
      Email
    </div>
  </div>
  <div class="grid-body-main">

    <div class="default-row">
      <div class="default-cell">
        1
      </div>
      <div class="default-cell">
        Aman
      </div>
      <div class="default-cell">
        amansinghgusain
      </div>
      <div class="default-cell">
        amansinghgusain@gmail.com
      </div>
    </div>

    <div class="default-row">
      <div class="default-cell">
        2
      </div>
      <div class="default-cell">
        Jon Doe
      </div>
      <div class="default-cell">
        jondoe
      </div>
      <div class="default-cell">
        jondoe@gmail.com
      </div>
    </div>

    <div class="default-row">
      <div class="default-cell">
        2
      </div>
      <div class="default-cell">
        Jon Doe
      </div>
      <div class="default-cell">
        jondoe
      </div>
      <div class="default-cell">
        jondoe@gmail.com
      </div>
    </div>

    <div class="default-row">
      <div class="default-cell">
        2
      </div>
      <div class="default-cell">
        Jon Doe
      </div>
      <div class="default-cell">
        jondoe
      </div>
      <div class="default-cell">
        jondoe@gmail.com
      </div>
    </div>
  </div>
</div>

问题

  

当出现垂直滚动条时，它会覆盖一定的宽度   转弯从grid-body-main扣除，这会产生差异   header row和body row在此Plunkr中清晰可见。

解决方法

  

我希望我的网格看起来像this，但不是table

任何有关这方面的帮助都会很明显。