0

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%;
}
Lazar Nikolic
  • 4,261
  • 1
  • 22
  • 46
Nick Else
  • 93
  • 8
  • We'd appreciate a working snippet on here to show the problem. Please add a minimalized code-snippet to show the problem on here. But for now I have [something](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for you –  Sep 21 '18 at 09:15
  • https://stackoverflow.com/q/32239549/3597276 – Michael Benjamin Sep 22 '18 at 02:15

1 Answers1

1

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.

fen1x
  • 5,616
  • 6
  • 28
  • 39
  • @NickElse I've added `.c-product--compact .c-product__link > .o-grid { flex: 1 1 auto; } ` in IE11 and it seemed to worked. – fen1x Sep 21 '18 at 11:01
  • I am sorry for contacting you this way (my comment isnt related to your input here). I came across a question you voted on in "triage" where you made the wrong choice. Please: study the help for triage carefully, to avoid putting items into the edit queue that don't belong there. I hope you see this as a chance to improve your voting. I am specifically talking about https://stackoverflow.com/review/triage/21156904. Feel free to drop me a comment in case you have further questions or feedback for me. If you give me a short heads up, I will quickly delete this comment. – GhostCat Oct 17 '18 at 11:10