Justify-контент во flexbox не работает в IE 11

Question

Я пытаюсь заставить элемент выравниваться вправо.Я использовал flexbox, поскольку нашел, что проще всего выровнять текст и любые значки.Фрагмент кода ниже является примером того, что я делаю.Код отлично работает в Firefox и Chrome, но justify-content не работает в IE.У меня уже есть "-ms-flex-pack", но он ничего не делает.Содержимое выравнивается по левому краю в IE, а не по правому краю.

.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

Вам нужно добавить flex-direction: column; к родительскому элементу, чтобы выровнять содержимое в 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; }