Search code examples
cssinternet-explorersafariflexboxvendor-prefix

Can't get flexbox to work in IE/Safari

This all works perfectly in Chrome on my MBP, but breaks endlessly on the other browsers. I have used, https://autoprefixer.github.io/ to generate the necessary prefixes but to no avail.

Maybe someone can spot where I am going wrong? I striped the prefixed code out because I don't know what is affecting what now, so it's a bit of a blank slate... Heres the code and associated screenshots

enter image description here

enter image description here

Code is modified because of so many diff nested div's in here. Order will be parent > child etc..

.recommendation-modal {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: flex-start;
  background: #FFFFFF;
  z-index: 202;
  width: 100%;
  max-width: 800px;
  height: 70vh;

.rec-right--container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: #4B77BE;
    color: #fff;

.rec-right--body {
      display: -moz-flex;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;
      height: 100%;
      @media (max-width: $screen-sm) {
        flex-direction: row;
      }
Solution

  • Ended up just needing to add the old syntax, I basically just found every old syntax possible and threw them in there until it worked...