Autosize divs with div overflow Hide between them

Question

I have 3 inline-flex Ivs, one on the other side, I need the left and right to be the content size (autosize) and the center to be the size that remains, but with overflow Id, I searched in everything and did not find, no matter if you need to use table, as long as it works.

Example:

+-----+--------------------------------------------+-----+
|  E  | Centro, com o tamanho que restar           |  D  |
+-----+--------------------------------------------+-----+

The right div can be 0 wide at some times, and the center div will have another inside div with size that can be greater than 100% and the corners will have other Divs inside with inline-flex

HTML code

<div id="tabs">
    <div id="tabs-left">
        <div class="tab">Home</div>
        <div class="tab" id="scroll-decrease" style="display: none;">
            <i class="fa fa-angle-left center"></i>
        </div>
    </div>

    <div id="tabs-center">
        <div id="tab-1" class="tab">
            Tab 1
        </div>
        <div id="tab-2" class="tab">
            Tab 2
        </div>
        <div id="new-tab" class="tab add">
            <i class="fa fa-plus center"></i>
        </div>
    </div>

    <div id="tabs-right">
        <div class="tab" id="scroll-increase" style="display: none;">
            <i class="fa fa-angle-right center"></i>
        </div>
    </div>
</div>

Answer 1

Well there are some ways to do that, I usually use width: calc, but it could be with flex-Grow, it will depend on what you want as a final result.

*{border: 1px solid #000011;}
#tabs{display:flex;}
#tabs-left{height:33px;width:100px;}
#tabs-center{height:33px;width: calc(100% - (200px));}
#tabs-right{height:33px;width:100px;;}

<div id="tabs">
    <div id="tabs-left">
        <div class="tab">
        Left
        </div>
       
    </div>

    <div id="tabs-center">
        <div id="tab-1" class="tab">
            Center
        </div>
       
       
    </div>

    <div id="tabs-right">
        <div id="tab-2" class="tab">
           Right
        </div>
    </div>
</div>

For this example it gives you to adapt in your code. If this is it, could validate the answer. Vlw...