How to make a stretchable div with respect to the div inside it

Question

How can I make the parent div (red) extensible, so that the minimum number of chidren inside it can be one and the maximum number can be 3, after which the fourth div automatically sets down.

My css for inner div

.inner_div { min-height: 238px; border-bottom: 1px dashed #e7e7e7; border-right: 1px dashed #e7e7e7; border-top: 1px dashed #e7e7e7; border-left: 1px dashed #e7e7e7; padding-top: 10px; padding-bottom: 10px; float: left; padding: 9px; width: 200px; background-color: white; } 

and css for parent (outer div) -

 .outer_div { padding: 0 20px; margin-top: 55px!important; margin-bottom: 33px!important; background: white; border-left: 1px dashed #e7e7e7; overflow: hidden; max-width: 611px; min-width: 223px; width: auto; } 

Answer 1

Let Get Fluid!

There are many answers here!

The following example works in all screen sizes / widths for up to three drawers.

The fact that @media used to transfer and remove borders at each width of the viewport, from one column to three columns. It also resizes the outer div for each step and changes the background color, etc., if necessary. Refer to the fragment comments for a basic explanation of what is happening.

This example can consume as many or several boxes as you want. Open it full screen and resize to see the results.

Update . I gave the insiders a dark green background, and the external display: inline-block resized with its contents.

 * { box-sizing: border-box; /* incorporate padding into width (.outer_div padding is excluded) */ } .outer_div { margin: 50px; display: inline-block; max-width: 640px; min-width: 240px; /* 200 * 3 across + 40 .outer_div padding = 640 */ padding: 20px; /* transition? yes! on re-size! */ transition: background 1s; transition: max-width 0.05s; } .inner_div { min-height: 238px; /* BORDER ALL THE THINGS!!!*/ border: 1px dashed #000; float: left; padding: 9px; /* padding is accounted for in the width thanks to border-box */ width: 200px; background: #0a8f08; } /* Clear the floats at the very end */ .outer_div:after { content: ' '; display: block; clear: left; } /* 3 boxes across */ /*@media sizes increase and decrease dependant on inner box width and outer_div padding */ @media screen and (min-width: 756px) { .outer_div { background: #a3e9a4; } /* Remove all bottom borders */ .inner_div { border-bottom: none } /* Remove every middle border */ .inner_div:nth-child(3n+2) { border-right: none; border-left: none; } /* Last child gets a right border */ .inner_div:last-child { border-right: 1px dashed #000; } /* last three get a bottom border */ .inner_div:nth-last-child(-n+3) { border-bottom: 1px dashed #000; } } /* 2 boxes across */ @media screen and (min-width: 573px) and (max-width: 755px) { .outer_div { max-width: 440px; background: #dcedc8; } /* Remove all bottom borders */ .inner_div { border-bottom: none; } /* Remove every second border */ .inner_div:nth-child(2n) { border-left: none; } /* last two get a bottom border */ .inner_div:nth-last-child(-n+2) { border-bottom: 1px dashed #000; } } /* 1 box across */ @media screen and (max-width: 572px) { .outer_div { max-width: 240px; background: #f0f4c3; } /* Remove all bottom borders */ .inner_div { border-bottom: none; } /* last one gets a border */ .inner_div:last-child { border-bottom: 1px dashed #000; } } 

 <div class="outer_div"> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> </div> 

Answer 2

You should probably add a few pixels to your max_ width, otherwise 3 inner_divs just don't fit:

 max-width: 660px; 

And then clean every third inner_div file:

 .inner_div:nth-of-type(3n+1) { clear: left; } 

---

Here's the jsfiddle .

Answer 3

Just change your external css div with

  .outer_div { padding: 0 20px; margin-top: 55px!important; margin-bottom: 33px!important; background: white; border-left: 1px dashed #e7e7e7; overflow: hidden; max-width: 100%; min-width: 223px; } 

Answer 4

You can try the following parameter to change the code according to your needs proportionally.

display:inline-block; can perform tricks

 .outer_div{ display:inline-block; max-width:300px; height:300px; background-color:red; overflow:auto; } .inner_div{ width:100px; height:100px; background-color:black; float:left; } 

Answer 5

Use : nth-child pseudo - class.

To make the parent div extensible, add float: left or display: inline-block .

 .outer_div { padding: 0 20px; margin-top: 55px!important; margin-bottom: 33px!important; background: white; border-left: 1px dashed #e7e7e7; overflow: hidden; width: auto; float: left; clear: both; margin: auto; } .inner_div { min-height: 238px; border: 1px dashed #e7e7e7; float: left; padding: 9px; width: 200px; background-color: white; } .inner_div:nth-child(3n+1) { clear: left; } 

You can see the result in jsfiddle .

Answer 6

In inner-div class add this line

display:inline-block;

and the outer-div should be like that

.outer_div { padding: 0 20px; margin-top: 55px!important; margin-bottom: 33px!important; background: white; border-left: 1px dashed #e7e7e7; overflow: hidden; max-width: 669px; min-width: 223px; }

You can always change max-width to get more free space for the fourth block or delete the third block!

Answer 7

I would use something like flexbox for this kind of thing.

There would be many features / combinations, and it would also be very easy to edit if necessary.

Symbols:

 .parent { display: flex; height: 300px; /* Or whatever */ } .child { width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ } 

Here is an example of only one possibility.

Browser Support:

Look here