容器中的元素溢出：隱藏； 盡管溢出的寬度更寬，但寬度與父級相同

Question

鑒於：

<div class=gallery>
     <div class=slider>...</slider>
</div>

畫廊的主要 css 為overflow:hidden; positon:relative; overflow:hidden; positon:relative; 並作為示例width:1000px;

然后滑塊具有“更寬”的內容，遠遠超出畫廊的寬度，此處將寬度設置為 1000 像素。

問題是，當使用 overflow:hidden 時，計算滑塊寬度（使用jQuery('.slider').outerWidth() ）給出與.gallery元素相同的寬度。

讓滑塊顯示其實際寬度的唯一方法是在.slider上使用position: absolute

問題是現在， .gallery將不再擴展它的高度。

我必須以某種方式手動計算（並跟蹤）要在畫廊上設置的高度。 我不知道 .slider 內容的高度。

坦率地說，我不明白為什么.slider寬度不能計算，除非使用position:absolute 。

可能有一種方法可以迭代.slider子元素並可能計算每個子元素的寬度，但風險是溢出的子元素的寬度也設置為零。

任何人都知道一個好的解決方法嗎？

Answer 1

您可以將滑塊寬度設置為

width:100%

有了它，它永遠不會超出其父寬度

Answer 2

slider.scrollWidth似乎可以解決問題並返回與以下相同的值：

        var total = 0;
        $slider$.children().each(function(i, e){
            e = jqr(e);

            total += e.outerWidth(true)
        })

        return total;