List: zero width when used in popup on IE11

[wkeese]

When a List is displayed as a popup on IE11, the width becomes essentially zero (or 16px). You can see this by modifying any List sample to be inside of a <div style="position: absolute: left: 50px; top: 50px">.

The IE11 problem is triggered by the extra layer of nesting in the ListItem elements, specifically the <div class="d-list-cell"> inside the <d-list-item-renderer class="d-list-item">, both of which are display:flex:

<d-list-item-renderer class="d-list-item">
    <div class="d-list-cell">
        <div class="d-list-item-icon {{item.iconclass}}" aria-hidden="true" role="presentation"></div>
        <div class="d-list-item-label">short</div>
        <div class="d-spacer"></div>
        <div class="d-list-item-right-text"></div>
        <div class="d-list-item-right-icon {{item.righticonclass}}" aria-hidden="true" role="presentation">&gt;</div>
    </div>
</d-list-item-renderer>

If I change the <d-list-item-renderer class="d-list-item"> to display:block, then the list renders correctly on IE11. From my limited testing it doesn't seem to break anything. I don't understand though why we have separate <d-list-item-renderer class="d-list-item"> and <div class="d-list-cell"> nodes. (Note: maybe need similar changes for d-list-category etc.?)

Originally filed as ibm-js/delite#422 but I think it needs to be fixed (worked around) in the deliteful/List code rather than in delite/popup.