Bil5 Bil5 - 9 months ago 20
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.


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;