IE11问题与绝对定位Flexbox的占用宽度父母，而不是内容

简单的摄制：IE11问题与绝对定位Flexbox的占用宽度父母，而不是内容

<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上运行。有没有解决这个问题？

来源

2017-08-30 kentor

你有没有考虑移动'位置：relative'一个级别？ https://jsfiddle.net/t1aLzbyq/1/ –

你还没有定义足够的内部'div'属性来给它一个宽度。设置“left”和“right”或明确的“width”属性。与普通块级元素相比，具有'position：absolute'的元素具有不同的大小规则。 – Dai

@Michael_B不能这样做。此片段是菜单中的项目，其中包含更多项目。 – kentor

好了它。为了定位，需要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>

来源

2017-08-30 03:35:53 kentor

IE11问题与绝对定位Flexbox的占用宽度父母，而不是内容

回答

相关问题