html - Margin-left 将 div 推到 > 100%，我不知道如何解决它

Question

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

因此，我在 170px 的 div 上有一个边距。但是，通过拥有这个边距，它会将 div 推到 > 100%。当表格没有太多行（上图）时，这实际上是可以的，但是当有很多行时，它会将所有内容推入滚动条（我有溢出-x：自动设置）。

这是我的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

标签： htmlcss