CSS边框和溢出问题

Question

我遇到溢出问题并显示边框。

我的内容位于无序列表中，我将其设置为overflow: scroll; 问题是，当我将边框设置为无序列表时，边框不会扩展到溢出的元素。

我希望#times和#channel-rows ul的边框可以扩展和覆盖边界外的元素。 K L M N O P不在边界内。行B中的内容也不受边界覆盖。如何将这些元素与之前的元素放在同一个边框中？

有人可以举例说明如何使边框延伸到溢出区域吗？

请参阅JSFiddle。

JSFiddle

Answer 1

1）使用display:table

为可滚动内容添加包装器

2）设置儿童#times和#channel-rows

的宽度：100％

享受！

<强> UPDATED FIDDLE

Answer 2

从#times和＃channel-rows中删除固定宽度，它可以解决您的问题。如果你想要我更新你的小提琴。

#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*/;;
}