2

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>
1
  • Coloca o código que ajuda...
    – MagicHat
    Commented 14/07/2016 às 19:46

1 Resposta 1

1

Bom há algumas formas para se fazer isso, eu geralmente uso width: calc, mas poderia ser com flex-grow, vai depender do que deseja como resultado final.

*{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>

Por esse exemplo dá para vc adaptar no seu código. Se for isso, poderia validar a resposta. Vlw...

3
  • Pensei em utilizar o calc, mas que eu saiba ele não funciona em algumas browsers antigos, então fiquei com um certo medo, mas da nd ^-^
    – Vinícius
    Commented 14/07/2016 às 20:24
  • O flex tmb tem suas limitações, na verdade se for pensar nos browsers antigos, vai ter de adaptar boa parte do css,,,,
    – MagicHat
    Commented 14/07/2016 às 20:26
  • Talvez isso ajude para os mais antigos... stackoverflow.com/questions/16034397/css-calc-alternative
    – MagicHat
    Commented 14/07/2016 às 20:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .