容器中的元素具有溢出：隐藏；尽管溢出的宽度更宽，但其宽度与父级相同

Question

给出：

overflow:hidden; positon:relative;

画廊的主要css为width:1000px;，例如jQuery('.slider').outerWidth()

滑块然后具有“更宽” 的内容，远远超出了画廊的宽度，在这里画廊的宽度设置为1000px。

问题是，当使用overflow：hidden时，计算滑块宽度（使用.gallery）与position: absolute元素具有相同的宽度。

获取滑块以显示其实际宽度的唯一方法是在.slider上使用.gallery

现在的问题是，.slider将不再扩大其高度。

我必须以某种方式手动计算（并跟踪）高度以在图库中设置。我不知道.slider内容的高度。

坦率地说，我不明白为什么，除非使用position:absolute，否则无法计算.slider的宽度。

也许有一种方法可以迭代{{1}}的子元素并可能计算每个子元素的宽度，但是风险是溢出的子元素的宽度也设置为零。

有人知道一个好的解决方法吗？

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;