Hello.

I have a container, and inside that container, I have 3 more.

But these containers for moments can be only 2.

I wanted the container to always have 500px, regardless of whether they were all in the container or not.

I intend to have a flexible container in size in real time.

How can I do this?

Thankful for the help.

Hi,


I do not understand the question.

Please can you clarify it a bit more, perhaps by pictures :)

I mean, the parent can be maximum of 500px?

so, the inner containers are can also be maximum of 500px combined?



J. wrote:

Hi,


I do not understand the question.

Please can you clarify it a bit more, perhaps by pictures :)

I mean, the parent can be maximum of 500px?

so, the inner containers are can also be maximum of 500px combined?




Parent must be 500 px
children 3 containers, 2 containers or 1 container must have 500px together.

1 Container = 500px or 2 Container = 500px or 4 container = 500px

I want it to be dynamic, but never exceed 500px, and always be 500px, even if it's only 1 container

Sorry for the english

Thanks :)

Hello Henrique,


Did you try to play around with CSS on both Parent and Children containers? Please find below example snippet for your reference. Hope this helps. Sorry, if it's not.

<style>

div.parentDiv {
  width: 500px;
  display: table;
  border: 5px solid red;
}

.parentDiv div {
  display: table-cell;
  border: 5px solid green;
  text-align: center;
}
</style>

<div class="parentDiv">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="parentDiv">
  <div>One</div>
  <div>Two</div>
</div>

<div class="parentDiv">
  <div>One</div>
</div>

J. wrote:

Hi,


I do not understand the question.

Please can you clarify it a bit more, perhaps by pictures :)

I mean, the parent can be maximum of 500px?

so, the inner containers are can also be maximum of 500px combined?



I needed that when there is only 1 child container, that this one, have 100% of the parent container.
If there are 2 containers then it will be 88% for one and 12% for another.
PS- where is 6% you should be 12%


Solution

Hi Henrique,


You can try the following css with the divs:

<html>
    <body>
        <style>
            .box {
                display: flex;
                Width: 500px;
                border: 1px solid red;
            }
           .childbox1 {
               flex-grow: 86;
               border: 2px solid green;
               margin: 1px;
           }
           .childbox2 {
               flex-grow: 12;
               border: 2px solid green;
               margin: 1px;
           }
           .childbox3 {
               flex-grow: 6;
               border: 2px solid green;
               margin: 1px;
           }
        </style>
        <div id='box1' class='box'>
            <div id='a1' class='childbox1'>Div1</div>
        </div>

        <div id='box2' class='box'>
            <div id='a2' class='childbox1'>Div1</div>
            <div id='b2' class='childbox2'>Div2</div>
        </div>

       <div id='box3' class='box'>
           <div id='a3' class='childbox1'>Div1</div>
           <div id='b3' class='childbox2'>Div2</div>
           <div id='c3' class='childbox3'>Div3</div>
       </div>
    </body>
</html>


Your output should be:


Regards,

Saugat



Solution

solution given by Karthik and Saugat seems to be the perfect solution for your problem.

the display table is the traditional solution and the flex-box is the modern solution.


If you check the browser capability for both in caniuse.

you will find below statistical. 



Regards,

Pankaj

I agree with Pankaj, the new flex options are awesome for this kind of stuff!

Also saugats solution is also rather nice, though I would prefer nth-child(n) selectors or something instead, so it's more dynamic without the ugly child classes.