显示更多div向右滚动

Question

我正在尝试使用float: right在一个div中加载更多组件，并使用滚动条（水平）以查看现在垂直显示的所有数据

这是我的代码

    <div class="right view-calendar">
        <ca-month-header *ngFor="let selectedMonth of selectedMonths" [viewDate]="selectedMonth"> 
        </ca-month-header>
    </div>

和我的风格

.right {
    float: right;
    overflow: scroll;
}
.view-header {
    width: 180px;
}

如果要显示4个组件，这是我的页面现在的外观

Answer 1

要使Y轴上的溢出起作用，您需要为该元素设置高度/最大高度。然后使用overflow-y。仅使用overflow也会引起水平滚动

请参见下面的示例

我也建议不要使用float进行布局。由于从未打算将其用于此目的，因此它会使元素脱离文档的正常流程。看看flexBox或cssGrid的布局。

.right {
height: 200px;
overflow-y:scroll;
float:right;
}

.right div {
height:50px;
background:red;
width:100px;
}
.right div:nth-child(odd) {
background:blue;
}

<div class="right">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>