Flex items overflowing their flex parent in IE11

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.

MIT License

13.63k stars 495 forks source link

Flex items overflowing their flex parent in IE11 #220

Closed anderskleve closed 7 years ago

anderskleve commented 7 years ago

I've been trying to hunt down this bug in the list of IE bugs, but can't seem to find it in there. It is solved by avoiding the shorthand flex-declaration on the inner element (.inner) - flex: 1; -> flex: 1 1 auto;.

Anyone who can point me in the right direction?

You can see the bug in action here (IE11) http://jsbin.com/nojugag/edit?html,css,output

HaoZeke commented 7 years ago

Have you tried setting width: 100%; instead of max-width: 100%; on the parent element?

philipwalton commented 7 years ago

I think this can be fixed by using flex: 1 0 auto.

I think this relates to a number of IE bugs that are hard to document and thus not in the README :/

riki137 commented 4 years ago

I just removed display: flex !important (.d-flex class) on a bootstrap .col and it fixed my problem flawlessly.