Divis autosize with div overflow hide between them

Question

Divis autosize with div overflow hide between them

Navigation

#1 by (1 votes)

2

I have 3 inline-flex divs, one next to the other, I need the left and right ones to be the size of the content (autosize) and the center is the size that remains, but with overflow hide, I searched 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 have width 0 in some moments, and the center div will have another div inside that can be larger 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>

html css div

asked by anonymous 14.07.2016 / 21:37

1 answer

How to retrieve the updated date in batch How to send form data with onChange event to php

score 1 · Accepted Answer

Well there are some ways to do this, I usually use width: calc , but could be with flex-grow, it will depend on what you want as the end 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 you can adapt in your code. If so, I could validate the answer. Vlw ...