如何在滚动元素内的屏幕上只放置4个框？

Question

我有一个具有一定宽度（高度可以改变）和滚动条的元素。里面有一个盒子。盒子大小等于带滚动条的元素宽度/高度的一半。我想在滚动元素之前只显示滚动元素中的4个初始框。但是，如果我取消注释第五个盒子，一切都会中断。

我怎样才能解决这个问题？

.main {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 300px;
    overflow: auto;
    overflow-x: hidden;
    background-color: #dfdfdf;
}

.main .row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}
  
.main .row .col-6 {
    width: 200px;
}
    
.main .row .col-6 div {
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    background-color: #888;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="main">
    <div class="row no-gutters">
        <div class="col-6">
            <div>Rectangle 1</div>
        </div>
        <div class="col-6">
            <div>Rectangle 2</div>
        </div>
        <div class="col-6">
            <div>Rectangle 3</div>
        </div>
        <div class="col-6">
            <div>Rectangle 4</div>
        </div>
        <!--
        <div class="col-6">
            <div>Rectangle 4</div>
        </div>
        -->
    </div>
</div>

jsFiddle link

Answer 1

将height设置添加到.main .row和.main .row .col-6，如我的代码段所示，以避免降低高度：

.main {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
  background-color: #dfdfdf;
}

.main .row {
  display: flex;
  flex-direction: row;
  height: 100%;  /* added */
  flex-grow: 1;
}

.main .row .col-6 {
  width: 200px;
  height: 50%;  /* added */
}

.main .row .col-6 div {
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  background-color: #888;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="main">
  <div class="row no-gutters">
    <div class="col-6">
      <div>Rectangle 1</div>
    </div>
    <div class="col-6">
      <div>Rectangle 2</div>
    </div>
    <div class="col-6">
      <div>Rectangle 3</div>
    </div>
    <div class="col-6">
      <div>Rectangle 4</div>
    </div>
    <div class="col-6">
      <div>Rectangle 5</div>
    </div>
  </div>
</div>

这是小提琴中的同一件事：https://jsfiddle.net/1sdqn0hg/1/