Set background colour for div with auto-scroll

I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:

.outlinebox {
  width: 435px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  padding: 5px
}

The second div is used as inner box to set nowrap for codes with the class:

.nowrappercodesinner {
 width: auto;
 padding: 5px; 
 overflow: auto;
 white-space:nowrap;
}

I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific backgroun开发者_开发技巧d colour. For example:

<div class="outlinebox">
  <div class="nowrappercodesinner">
     <div class style=""background-color:#cccccc;">
         ...
     </div>
  </div>

The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.

Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.

overflow: auto;

in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.

EDIT: Default value for overflow seems to be visible.

Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.

<div class="outlinebox">
  <div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>