Tenho 3 divs inline-flex, uma do lado da outra, preciso que a da esquerda e direita fiquem com o tamanho do conteúdo (autosize) e a do centro fique com o tamanho que restar, porém com overflow hide, pesquisei em tudo e não encontrei, não importa se precisar utilizar table, desde que funcione.
Exemplo:
+-----+--------------------------------------------+-----+
| E | Centro, com o tamanho que restar | D |
+-----+--------------------------------------------+-----+
A div da direita pode ter largura 0 em alguns momentos, e a do centro vai possuir uma outra div dentro com tamanho que pode ser maior que 100% e as dos cantos vão possuir outras divs dentro com inline-flex
Código HTML
<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>