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

时间:2017-12-20 14:20:07

标签: css twitter-bootstrap css3 flexbox bootstrap-4

我有一个具有一定宽度(高度可以改变)和滚动条的元素。里面有一个盒子。盒子大小等于带滚动条的元素宽度/高度的一半。我想在滚动元素之前只显示滚动元素中的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>
&#13;
&#13;
&#13;

jsFiddle link

1 个答案:

答案 0 :(得分: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/