div双列布局，外层width：500px;左列width:100px，右列width：100%;margin-left:150px;
预览效果为右列实际大小超出了外层div。
请教如何实现右列不超出外层div范围（要求不使用js，实际应用中外层会捕获window.resize()灵活指定宽度）。
<!doctype html><html><head><style type="text/css">.div1{ border: 1px solid black; width:500px;}.div2{ width:100px; border: 1px solid blue; float:left; height:200px;}.div3{ width:100%; border: 1px solid red; margin-left:102px; height:200px;}</style></head><body> <div class="div1"> <div class="div2">div2</div> <div class="div3">div3</div> </div></body></html>
.div3{ border: 1px solid red; margin-left:102px; height:200px;}
