Flexbox-based CSS not functioning on any iOS browser

Question

I am using Jade, Stylus and Node JS for my website. It runs fine on desktop Chrome, Firefox, IE, and Edge. It runs fine on Android Chrome and Browser. It does not function properly on iOS Chrome or Safari, showing similar failures on both. It also does not work on Safari on desktop. It seems to work on iOS9 but not iOS8 or below.

Here is a screenshot showing the difference between mobile Chrome on Android and mobile Chrome on iOS. https://i.sstatic.net/RMNT8.jpg

Even though I am explicitly putting the -webkit-, and nib is generating the -webkit- prefixes in the compiled CSS, why is it not working on mobile iOS browsers? Here is my full CSS on Github. https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css

The live website, for testing and demonstration, is here: http://www.lsmsaSGO.com

The website's full Stylus code is a few thousand lines long, but an example is as follows. My Stylus code:

.addMore
    text-align center

    .multButtons
        width 100%
        display -webkit-flex
        display flex
        justify-content center
        -webkit-justify-content center
        align-items center
        -webkit-align-items center
        flex-direction column
        -webkit-flex-direction column

The compiled CSS using Stylus and Nib.

  .addMore {
    text-align: center;
  }
  .addMore .multButtons {
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-direction: column;
  }

Answer 1

Turning off flex on the .issueContainer seemed to fix things for me.

.issueContainer {
    /* display: -webkit-flex; */
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
}

.issueContainer doesn't need flexbox to make it's children stack since that's the default behavior anyway.

Answer 2

Use Autoprefixer CSS online and you will get all current vendor prefixes for your CSS rule. Here's the result you would get:

.addMore .multButtons {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }