绝对定位的 flexbox 的 IE11 问题占用父项的宽度而不是内容答案

【问题标题】：IE11 issue with absolutely positioned flexbox takes up width of parent instead of contents绝对定位的 flexbox 的 IE11 问题占用父项的宽度而不是内容
【发布时间】：2018-02-07 13:53:46
【问题描述】：

简单的复制：

    <div style="display: inline-block; position: relative; border: 1px solid black;">
        short
        <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; left: 0;;">longerbox</div>
    </div>

flexbox 元素（longerbox）不像在 Chrome 上那样占据其内容的宽度。有解决办法吗？

【问题讨论】：

您是否考虑过将position: relative 上移一级？ jsfiddle.net/t1aLzbyq/1
您还没有在内部 div 上定义足够的属性来给它一个宽度。设置left 和right 或显式width 属性。与普通块级元素相比，具有position: absolute 的元素具有不同的大小规则。
@Michael_B 不能这样做。这个 sn-p 是菜单中的一个项目，还有更多项目。
@Dai position: absolute 在正常情况下应该取其内容的宽度，考虑到它在 Chrome 中工作。

标签： html css flexbox internet-explorer-11

【解决方案1】：

好的，想通了。需要一个额外的 flexbox 容器用于定位。即没有 position: absolute 和 flexbox 在同一个元素上。

<div style="display: inline-block; position: relative; border: 1px solid black">
    short
    <div style="position: absolute; border: 1px solid black; top: 100%; left: 0">
        <div style="display: flex">longerbox</div>
    </div>
</div>

【讨论】：