CSS邊框和溢出問題

Question

我在溢出和顯示邊框時遇到問題。

我的內容位於無序列表中，並且已設置為overflow: scroll; 問題是，當我將邊框設置為無序列表時，邊框不會擴展到溢出的元素。

我希望#times和#channel-rows ul的邊框擴展並覆蓋邊框之外的元素。 KLMNOP不在邊界。 B行中的內容也沒有被邊框覆蓋。 如何使這些元素與之前的元素處於同一邊界？

有人可以提供一個示例說明如何使邊界延伸到溢出區域嗎？

請參閱JSFiddle。

JSFiddle 。

Answer 1

1）使用display:table將包裝器添加到可滾動內容

2）設置寬度：子級#times和#channel-rows寬度為100％

請享用！

更新場

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