.#{$prefix}virtualscroller {
    overflow: hidden;
    position: relative;

    .#{$prefix}scroller-inner {
        // the primary function of this element is to act as a wrapper around its content to
        // determine the content's size.  There are several possible ways to achieve this,
        // so first, the ones we tried that didn't work, and the reasons why:
        //
        // 1. display:table - works everywhere except firefox.  In firefox, absolutely positioned
        // children of a display:table element do not contribute to its scrollWidth/scrollHeight
        // and so we cannot use the element to determine the true size of the content.
        //
        // 2. display:table-cell - should work similarly to display:table in that it shrink wraps
        // the content in both directions, and it works as expected with regard to scrollWidth/
        // scrollHeight and absolutely positioned children, but it must be a child of a
        // display:table element in order for min-width/min-height specified as percentages
        // to work (we use min-width/min-height:100% to ensure this element at least fills
        // its container)
        //
        // 3. display:inline-block - does everything we need it to do, except since it is
        // an inline element, its sizing and spacing are affected by line-height, font-size
        // and vertical-align.  We can work around these issues by setting line-height:0,
        // font-size:0, and vertical-align:top.  But this has undesirable side-effects because
        // all three of these properties are inherited by child elements and we do not want
        // the presence of a scroller to change the styling of contained children.
        //
        // The solution - float:left
        // - It shrink wraps the contents in both directions
        // - Being a block element, its scrollWidth/Height are affected by absolutely positioned
        //   children
        // - It can act as a container for child elements without affecting their styling
        float: left;

        // position:relative ensures absolutely positioned children are positioned correctly
        position: relative;

        // https://sencha.jira.com/browse/EXTJSIV-12773
        // Scroller must not cause width of block items to shrink.
        // Must always be at least 100% of component width.
        min-width: 100%;
        min-height: 100%;
    }
}