CODEWITHSUNDEEP
htmlcssflexboxinternet-explorer-11
kentor
kentor

Reputation: 1144

IE11 issue with absolutely positioned flexbox takes up width of parent instead of contents

Simple repro:

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

The flexbox element (longerbox) does not take up the width of its content like it does on Chrome. Is there a fix for this?

enter image description here

Upvotes: 1

Views: 2521

Answers (1)

kentor
kentor

Reputation: 1144

Ok figured it out. Need an extra container for the flexbox just for positioning. i.e. don't have position: absolute and flexbox on the same element.

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

Upvotes: 3

Related Questions