.#{$prefix}container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.#{$prefix}container-body-el {
    position: relative;
    overflow: hidden;
    flex: 1;

    .#{$prefix}has-flexbasis-bug & {
        flex-basis: auto;
    }
}

// The body sizer element is a workaround for https://bugs.webkit.org/show_bug.cgi?id=137730
// It wraps the body-el so that percentage sizes may be used on its child elements.
.#{$prefix}body-sizer-el {
    flex: 1;
    position: relative;

    > .#{$prefix}container-body-el {
        position: absolute;
        // height and width 100% allow percentage sizing to work on child elements in safari
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

// Workaround for IE11 issue where vertically flexed elements (such as body-el/body-wrap-el)
// are not constrained to the max-height of their container if the container has no "height".
// See https://sencha.jira.com/browse/EXTJS-24498
.#{$prefix}ie11 .#{$prefix}container.#{$prefix}max-height-wrapped {
    flex-direction: row;
}

.#{$prefix}max-height-el {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}