CODEWITHSUNDEEP
cssflexboxinternet-explorer-11
Nick Else
Nick Else

Reputation: 93

Flex and flex-direction: column; IE11 Issue

Got a bit of a weird issue, I've got a lot of overlapping content in IE11 when using flex and flex-direction: column.

I've read a number of answers on here that suggested using flex: 1 and this didn't seem to fix my issue. Anyone got any other suggestions as to what I could be missing here?

Thank you in advance,

Nick

Broken Site URL: http://8b220f.3.ekm.shop

.c-product--compact .c-product__attributes-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
    flex-direction: column;
}


.o-grid__item {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding-left: 1.5rem;
   width: 100%;
}

Upvotes: 0

Views: 2199

Answers (1)

fen1x
fen1x

Reputation: 5870

There are some bugs in IE10-11 (and other browsers) implementaion of flexbox - you can read about them here

Try setting flex: 1 1 auto; instead of flex: 1; on flex-children.

Upvotes: 1

Related Questions