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

Question

How can i make a parent div (red) stretchable so that min number of chidren inside it can be one and maximum number can be 3 after which the fourth div sets vertically down automatically.

My css for inner div is

.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) is

.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's Get Fluid!

There are a lot of answers here!

The following example works across all screen sizes / widths for up to 3 boxes across.

That @media is used to give and take borders away at each viewport width, one column up to three columns. It also re-sizes the outer div for each step, and changes the background colour, etc if wanted. Refer to the comments in the snippet for a basic explanation of what's going on.

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

Update - I have given the inners a dark green background and the outer is display: inline-block to resize 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>