side bar with a no previsible width in CSS/HTML - html

Question

Is there a way to achieve the following behavior in css/html :
Please note the green side bar has not to be responsive but I cannot give it a fixed width with
width: XX px;
because it can contain more or less elements, so no idea of XX in advance.
The brown bar has to be responsive and takes all the remaining width.
Thanks in advance for any trick! I have tried tables but with no success as we can't specify a div to restrict its with to what is necessary.

Answer 1

You can achieve that easily with flexbox. Here's the example:
http://codepen.io/anon/pen/JKXXNE
#container {
display:flex;
}
#sidebar, #content {
height: 100px;
}
#sidebar {
background-color: green;
}
#content {
background-color: brown;
flex: 1;
}

Answer 2

You can use Flexbox, and if you set flex: 1 on right div it will take rest of free space and width of left div will still be dynamic.
.parent {
display: flex;
border: 2px solid black;
}
.left {
background: #22B14C;
padding: 10px;
}
.right {
background: #EFE4B0;
padding: 10px;
flex: 1;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
This can also be done with CSS Table layout you just need to set width: 100% on .right div and it will take rest of free space
.parent {
display: table;
border: 2px solid black;
}
.left {
background: #22B14C;
display: table-cell;
padding: 10px;
}
.right {
background: #EFE4B0;
display: table-cell;
width: 100%;
padding: 10px;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>

Answer 3

For older browsers, use display: table
html, body{
height: 100%;
margin: 0;
}
.tbl{
display:table;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
}
.content{
width: 100%;
}
#left_col {
background: orange none repeat scroll 0 0;
width: 1%;
}
#right_col {
background: green none repeat scroll 0 0;
width: 100%;
}
<div class="tbl content">
<div class="row">
<div id="left_col" class="cell">
wide content <br>
content <br>
wider contentcontent <br>
</div>
<div id="right_col" class="cell"></div>
</div>
</div>

Answer 4

Another way to achieve this without using flexbox can be:
Working Fiddle:
https://jsfiddle.net/y00e5w6m/
(Note i have used sample css and input just to showcase how this can be done. This should be tuned a bit according to requirements)
Sample Output:
Html:
<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>
JS:
var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;
console.log(otherContentWidth);
$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());