How can a scrollbar be triggered /using overflow property in an angular app (by ng-repeating through elements)?

I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).

I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html? Thanks!! Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.

<li>
  <a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
   <div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">

    <div class="sidebarBox">
        <h2 class="sideBarHeader">Cart </h2>

        <div class="sidebarContainer" ng-repeat="item in cart">
            <img src="" style="width:90px;height:100px;">

            <div class="sidebarContent">
                <p class="sidebarTitle">{{item.title}} </p>
                <p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
                <p class="sidebarSubtitle">Price: ${{item.price}}</p>
            </div>
            <p class="sidebarLine"></p>
        </div>

    </div>
    <br>
    <div class="sidebarNoScroll">
        <p style="color:black;font-size:22px;">Total</p>
        <p class="sidebarTotal">${{ total() }}</p>
        <button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
        <button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
     </div>

  </div>
</li>

css.

.sidebarContainer {
    overflow:scroll;
    height:224px;
 }
.sidebarNoScroll {
     overflow: hidden;
 }


ANSWERS:


Wrap the container.

<div class="sidebarContainer">
        <div ng-repeat="item in cart">

        </div>
</div>


 MORE:


 ? In CSS, margin and overflow not working
 ? How do I align the columns in CSS flexbox?
 ? Why should Flexbox not be used for large scale layouts?
 ? Overflow vertical in a flex container
 ? Desktop and mobile flexbox layouts without nested containers
 ? Div overlay the same size as the div
 ? Sticky Flexbox Footer isn't Working
 ? CSS Flex dynamic grid with multiple sizes
 ? How to automatically stretch and yet constraint HTML child element within parent container?
 ? PrimeNG OrderList buttons remove