Issue with CSS Borders and Overflow

Question

I'm having an issue with overflow and displaying a border.

I have content in an unordered list which I have set to overflow: scroll; Problem is, when I set a border to the unordered list, the border does not extend to the elements which overflow.

I would like the border for #times and #channel-rows ul, to extend and cover the elements that are outside the border. K L M N O P are not in the border. Content in Row B is not covered by the border too. How do I get these elements into the same border as the elements before it?

Can someone provide an example on how to make the border extend into the overflow area?

Please see JSFiddle.

JSFiddle.

Answer 1

1) Add a wrapper to the scrollable content with display:table

2) Set width:100% on the children #times and #channel-rows

Enjoy!

UPDATED FIDDLE

Answer 2

remove fixed width from #times and #channel-rows and it solve your problem. If you want I update your fiddle.

#times {
    float:right;
    padding: 10px 10px;
    width: 738px /*<-- THIS IS THE PROBLEM*/;
    border: 2px solid grey;
}

#channel-rows {
    background: none repeat scroll 0 0 #00FFFB;
    float:right;
    height: auto;
    width: 738px/*<-- THIS IS THE PROBLEM*/;;
}