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的佔用寬度父母，而不是內容

回答

相關問題