Bil5 Bil5 -5 years ago 118
HTML Question

side bar with a no previsible width in CSS/HTML

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 Source

You can achieve that easily with flexbox. Here's the example:

#container {
#sidebar, #content {
  height: 100px;
#sidebar {
  background-color: green; 
#content {
  background-color: brown;
  flex: 1;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download