Bil5 Bil5 - 5 months ago 7
HTML Question

side bar with a no previsible width in CSS/HTML

Is there a way to achieve the following behavior in css/html :

description

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

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;
}
Comments