仅滚动水平行的一部分，保持另一部分固定答案

【问题标题】：Scroll only one part of horizontal row keeping the other fixed仅滚动水平行的一部分，保持另一部分固定
【发布时间】：2019-02-15 01:27:58
【问题描述】：

html

<div class="xxx">
    <div class="xyz" ng-repeat="item in formList">
        <div ng-show="formList.indexOf(app)!= -1" class="added-item">
            <img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
        </div>
    </div>
    <div class="abc" ng-hide="formList.length>20">
        <button class="btn" ng-click="addItem()">
            Add<i class="glyphicon glyphicon-plus"></i>
        </button>
    </div>
</div>

css

.xxx {
    width:500px;
    height: 80px;        
}
.added-item-icon, .abc {
    width: 50px;
    height: 50px;
}

我不擅长css，只有非常基础的知识我正在尝试在高度 80 和宽度 500 像素的水平选项卡中添加一些项目列表，也是一个添加应用程序按钮根据代码，当我们添加第 20 个应用时，添加应用按钮会消失

我需要做的是，假设 xxx div(horizontal div) 可以有 5 个项目，之后会发生溢出我想将溢出设置为水平，而不是垂直同样在那个阶段（添加5个项目时），我想修复xxx分区最右侧的添加应用按钮，由于溢出而滚动应该不会影响该按钮，应该在那里修复

我们不需要关心项目图标或添加按钮的大小，请帮忙

【问题讨论】：

标签： css angularjs

【解决方案1】：

为此，您需要考虑使用 flexbox。要使其正常工作，您真正需要做的就是将display: flex; flex-direction: column 添加到您的容器中，然后将overflow-y: auto 添加到您要滚动的部分。

这是一个Plunker 演示它。

【讨论】：