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

Question

简单的重复：

    <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元素（longbox）不会像在Chrome上那样占用其内容的宽度。有没有解决这个问题？

Answer 1

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;