Two divs can stand next to each other without limiting the width of first div

Question

I am trying to find a way where two divs can stand next to each other side by side and div one has a content some writing maybe. While div 2 also contains some text.

Div one should adjust the width automatically with respect to the width of div 2, so that the height increases instead of width when the content in div 1 increases and it should not push the div 2 out or it should not effect the div 2.

Please follow the link. Where red div should adjust its width with respect to the green div.

fiddle-jsfiddle link

#box1 {
  background: red;
  height: 100px;
  width: auto;
  float: left
}

#box2 {
  background: green;
  height: 100px;
  width: 400px;
  float: right
}

<div id="wrapper">
  <div id="box1">
    <bold>BOX 1</bold><br>Is there any way, box2 can stand next to the box 1 without limiting the width of box1. (Repeat)Is there any way, box2 can stand next to the box 1 without limiting the width of box1</div>
  <div id="box2">
    <bold>BOX 2</bold><br>Is there any way, box2 can stand next to the red without limiting the width of box1</div>
</div>

Answer 1

The easiest way is to use flex and change height to min-height (and erase the floats, and add flex-settings as below):

#box1 {
  background: red;
  min-height: 100px;
}

#box2 {
  background: green;
  min-height: 100px;
  width: 400px;
  flex-shrink: 0;
  flex-grow: 0;
}

#wrapper {
  display: flex;
}

<div id="wrapper">
  <div id="box1">
    <bold>BOX 1</bold><br>Is there any way, box2 can stand next to the box 1 without limiting the width of box1. (Repeat)Is there any way, box2 can stand next to the box 1 without limiting the width of box1</div>
  <div id="box2">
    <bold>BOX 2</bold><br>Is there any way, box2 can stand next to the red without limiting the width of box1. Is there any way, box2 can stand next to the red without limiting the width of box1</div>
</div>

Answer 2

this css will work (using flex box and leave the height to the wrapper div)

#wrapper{
  display: flex;
  height: 150px;
}
#box1 {
    background: red;
    flex:1; /* you can change the width here */
    /* width: 50%; */    
    float:left
}

#box2 {
    background: green;
    flex:1;/* you can change the width here */
    /* width: 50%; */    
    float:right
}

http://jsfiddle.net/x7cfkpdy/14/

Answer 3

Flexbox is a good solution for this. For #wrapper div, add 'display: flex;'. For the child divs remove floats, width and height and simply add 'flex: 1 1 0;'. Here is the updated css:

#wrapper {
display: flex;
}

#box1  {
background-color: red;
flex: 1 1 0;
    }

#box2 {
background-color: green;
flex: 1 1 0;
    }

Answer 4

use the CSS flex, flex-grow property, and take out float. Then control height with min-height

#wrapper{
  display: flex;
}

#box1 {
    background: red;
    flex:1; 
    /*flex-grow:1; depending on your preference*/
    min-height: 100px;
}

#box2 {
    background: green;
    flex:1;
    /*flex-grow:2; depending on your preference*/
    min-height: 100px;
}

Answer 5

This will do exactly what you aim to:

#wrapper{
   display: flex;
   flex-flow: row nowrap;
   min-height: 150px;
}

 #box1 {
   flex:1; 
   background: red;
 }

#box2 {
   flex:0; 
   flex-basis:400px;
   background: green;
}

<div id="wrapper">
  <div id="box1">
    <bold>BOX 1</bold><br>
    Is there any way, box2 can stand next to the box 1 without limiting the width of box1. (Repeat)Is there any way, box2 can stand next to the box 1 without limiting the width of box1
  </div>
  <div id="box2">
    <bold>BOX 2</bold><br>
    Is there any way, box2 can stand next to the red without limiting the width of box1
  </div>
</div>

Fiddle example