如何强制 div 始终可滚动？

Question

我正在使用Angular 4 和Bootstrap 4 (alpha 6)。我正在使用ngx-infinte-scroll，这样当用户滚动到 div 的顶部或底部时，我可以从服务器获取数据。问题是用户只有在有足够的项目时才能滚动。我想做到这一点，以便他们可以随时滚动。我怎样才能让它始终显示垂直滚动条？需要滚动的内容在item-scroller类中

<div class="col-md-9 chat-column">
  <div class="card h-100">
    <div class="card-block item-body">
      <h4 class="card-title center">Test</h4>
      <hr/>
      <div class="item-scroll"
           infinite-scroll
           [infiniteScrollDistance]="0.99"
           [infiniteScrollUpDistance]="0.075"
           [infiniteScrollThrottle]="10"
           [scrollWindow]="false"
           (scrolled)="onScrolledDown()"
           (scrolledUp)="onScrolledUp()"
      >
        <div *ngFor="let i of is">
          {{i}}
        <div class="answer left">
          <div class="avatar">
            <img [src]="i.imageURL" alt="">
          </div>
          <div class="name">{{i.name}}</div>
          <div class="text">
            {{i.text}}
          </div>
          <div class="when">{{i.when}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

css

.item-scroll {
  /*overflow: scroll;*/
  overflow-y: scroll;
  flex:none;
}

.item-body {
  font-family: "Raleway", sans-serif;
}

我尝试过的事情

1)

.item-scroll {
  height: 101%
  overflow-y: scroll;
  flex:none;
}

.item-body {
  font-family: "Raleway", sans-serif;
}

2)

.item-scroll {
  height: 101%;
  overflow-y: scroll;
  flex:none;
}

.item-body {
  height: 100%;
  font-family: "Raleway", sans-serif;
}

3)

.item-scroll {
  height: 100%;
  margin-bottom: 0 0 0 1px;
  overflow-y: scroll;
  flex:none;
}

.item-body {
  font-family: "Raleway", sans-serif;
}

Answer 1

尝试以正确的顺序设置样式并使用100vh 而不是百分比值。这是一个例子：

.item-body {
    height: 100vh;
    padding: 0;
}

.item-scroll {
    display: block;
    height: 100%;
    width: 100%;
}

在我的项目中，我使用angular2-virtual-scroll 并具有类似的代码构造。