仅部分页面滚动的 html 布局

我想创建一个分为 3 部分的页面布局 - 一列具有固定宽度，其中包含两行具有固定高度。另一个具有固定宽度的列，可能包含多个项目（超出视图范围）。

我正在寻找一种方法，使页面滚动仅影响项目列，以便屏幕的左侧（第一列）保持在视图中。

下面是布局的示例图像，以更好地说明其含义：

Apply overflow:auto对于您的右侧列。请看下面的 HTML 示例。

<div style="width:450px;">
  <div style="float:left; width:300px">
       <div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
       <div style="height:200px; border:1px solid #fff000;">Sample INformation</div>    
  </div>
 <div style="float:right; width:100px; height:320px; overflow:auto;">
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
  </div>
</div>

示例演示 http://jsfiddle.net/axmtsu6h/