Justify-content in flexbox not working in IE 11

Question

I am trying to get an element to align to the right. I've used flexbox as I've found it easiest to align the text and any icons perfectly. The code snippet below is an example of what I am doing. The code works perfectly in Firefox and Chrome, but the justify-content is not working in IE. I already have "-ms-flex-pack" but it is not doing anything. The content is left-aligned in IE instead of being right-aligned.

.align-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center; 
    -webkit-box-pack: right; 
        -ms-flex-pack: right; 
            justify-content: right;
    text-align:right;
}

.bold {
     font-weight: 600;
}

<div class = "align-right">
                  Purchase Date: &nbsp;
                  <span class = "bold"> 09/10/2018</span>
                </div>

Answer 1

You need to add flex-direction: column; to the parent element in order to justify-content in IE11

.align-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-align: center; 
    -ms-flex-align: center; 
        align-items: center; 
  -webkit-box-pack: right; 
    -ms-flex-pack: right; 
        justify-content: right;
  text-align:right;
  flex-direction: column; }