Прокрутите только одну часть горизонтального ряда, оставив другую фиксированной

Question

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 (горизонтальный div) может иметь 5 элементов, после чего происходит переполнение. Я хочу установить переполнение по горизонтали, а не по вертикали также на этом этапе (когда добавлено 5 элементов), я хочу исправитьдобавьте кнопку приложения в самом правом углу деления xxx, и прокрутка из-за переполнения не должна влиять на эту кнопку, она должна быть исправлена ​​там

нам не нужно больше заботиться о размере значков элементовили добавить кнопку, пожалуйста, помогите

Answer 1

Для этого вам нужно использовать flexbox .Чтобы это работало, все, что вам действительно нужно сделать, это добавить display: flex; flex-direction: column в ваш контейнер, а затем overflow-y: auto в секцию, которую вы хотите прокрутить.

Вот Плунжер , демонстрирующий это.