保证金左推div到＆gt; 100％，我无法弄清楚如何解决它

Question

我有一个从容器左侧开始170px的元素表（用div设计）。

因此，我在div上的保证金为170px。但是，通过这个余量，它将div推向＆gt; 100％。当表没有太多行（图像上方）时，这实际上是可以的，但是当有很多行时，它会将所有内容推送到滚动条（我有overflow-x：auto set）。

这是我的CSS

.attendance-sessions {
  display: flex;
  margin-left: 170px;

  .session-header {
    height: 150px;
    width: 30px;
    font-size: 12px;
    font-family: $gotham-medium;
    color: $my-gray;

    span {
      width:200px; /* same as height of .session-header */
      display:inline-block;
      -webkit-transform-origin:84px 70px;
      -ms-transform-origin:84px 70px;
      -o-transform-origin:84px 70px;
      transform-origin: 84px 70px;

      -webkit-transform:rotate(-75deg);
      -ms-transform: rotate(-75deg);
      -o-transform: rotate(-75deg);
      transform: rotate(-75deg);
    }
  }
}

ERB

<div class="attendance-table">
  <div class="attendance-sessions">
    <% sessions.each do |session| %>
      <div class="session-header">
        <span><%= session.date_formatted %></span>
      </div>
    <% end %>
  </div>

对应的html