Set width of a div exponentially with [style.width.%]

Question

I want to set the width of a div let say 7% of its container

.container {
  display: flex;
  overflow-x: scroll;

  .cell {
    border: 1px solid black;
    background-color: red;
    flex: 0 0 auto;
  }
}

<div class="container">
    <div class="cell" [style.width.%]="100/7">
        1
    </div>
     <div class="cell" [style.width.%]="100/7">
        2
    </div>
     <div class="cell" [style.width.%]="100/7">
        3
    </div>
     <div class="cell" [style.width.%]="100/7">
        4
    </div>
     <div class="cell" [style.width.%]="100/7">
        5
    </div>
     <div class="cell" [style.width.%]="100/7">
        6
    </div>
     <div class="cell" [style.width.%]="100/7">
        7
    </div>
</div>

The cell items should be horizontally scrollable, it seems like it's not working. Any help please?