CSS:在右侧创建一个div填充剩余空间,没有内部内容溢出

Question

我有一个固定宽度的左div,我想让正确的div填充剩余的空间.

到目前为止,我一直采用另一个SO海报推荐的这种方法,但如果我在正确的div中有内容,它就不起作用.

右边div中的内容设置为width: 100%,所以我希望它不会比右边的div宽,但它会溢出右边的div.

<div>
  <div id="left">left</div>
  <div id="right">right<div id="insideright">overflows</div</div>
</div>

<style>
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
#right {
    width: 100%;
    background-color:#00FF00;
}
#insideright { 
    width: 100%; 
    background-color: blue; 
    height: 5px;
}
</style>

JSFiddle在这里,演示问题:http://jsfiddle.net/MHeqG/155/

我能做什么？

我想支持旧的IE浏览器,所以display: table-cell如果我可以避免它,或者至少没有合理的后备,我宁愿不使用等.

Answer 1

实际上它很简单......不添加100%到正确的div :)
只需添加overflow属性

现场演示

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  overflow:auto;
  background-color:#00FF00;
}
#insideright { 
  background-color: blue; 
}

......如果你甚至想知道如何让红色(左)div填充剩余的高度... DEMO