在CSS / HTML中没有预先设定的宽度 [英] side bar with a no previsible width in CSS/HTML

问题描述

有没有办法在css / html中实现以下行为：

请注意，绿色边栏并没有响应，但我不能给它一个固定的宽度

 宽度：XX像素; 
  

因为它可以包含更多或更少的元素，所以没有提前XX的想法。

棕色条必须具有响应性，并占用所有剩余宽度。

预先感谢您的任何诀窍！我尝试过表格，但没有成功，因为我们无法指定div来限制它到必要的地步。 使用flexbox可以轻松实现。以下是示例：
http://codepen.io/anon/pen/JKXXNE

  #container {
 display：flex; 
} 
 #sidebar，#content {
 height：100px; 
} 
 #sidebar {
 background-color：green; 
} 
 #content {
 background-color：brown; 
 flex：1; 
} 
  

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: http://codepen.io/anon/pen/JKXXNE

#container {
  display:flex;
}
#sidebar, #content {
  height: 100px;
}
#sidebar {
  background-color: green; 
}
#content {
  background-color: brown;
  flex: 1;
}

这篇关于在CSS / HTML中没有预先设定的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！