Flexbugs: Flex items overflowing their flex parent in IE11

Created on 23 May 2017  路  3Comments  路  Source: philipwalton/flexbugs

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

Most helpful comment

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

All 3 comments

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

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

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

Was this page helpful?
0 / 5 - 0 ratings