How to place div next to each other maintaining width 100% between two other div's

Question

I want to make scroll with arrows left and right than then i click left or right arrow content in center div will move to left or right.

But right now center div is moving right arrow outside of visible area, how can maintain fixed width of center div regardless of parent width (responsive). with fixed width of arrows. Only sizeof center div change.

<div class="border-faded" style="display: flex; height:50px; width:100%; background-color: #f8f9fb; overflow-y: hidden; overflow-x: hidden">
  <div class="scrollleft" style="width:50px; float: left; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">LEFT</div>
  <div id="scrollBar" class="w-100" style="float: left; white-space: nowrap">
    xfxgggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
  <div class="scrollright" style="width: 50px; float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">RIGHT</div>
</div>