Цвет фона SCSS не отображается (angular2 + машинопись)

Question

У меня есть HTML с вложенными элементами div. У моего дочернего элемента div не отображается цвет фона: # 00000

Я пробовал переполнение: скрыто и важно, не работает

HTML

<div class="container">
  <div class="progress">
    <div class="progress-track"></div>
    <div id="Created" class="progress-step">
      Created
    </div>
    <div id="Approved" class="progress-step">
      Approved
    </div>
    </div>
  </div>

SCSS

.container {
  border: double;
  margin-left: 50%;
}

.progress {
  position: relative;
  display: flex;
}

.progress .progress-track {
  position: absolute;
  background-color: #a82222;
  height: 22px;
  z-index: -1;
  overflow: hidden;
}

этот класс не работает -> .progress .progress-track {}

Answer 1

Не уверен, что вы пытаетесь достичь, но ваш селектор классов работает. Если вы хотите, чтобы он отображал цвет фона #a8222, вам нужно придать ему некоторую ширину или добавить текст. См. Пример кода ниже:

.progress .progress-track {
  width: 100px;
  /* position: absolute; */
  background-color: #a82222;
  /* height: 22px;
  z-index: -1; */
  /* overflow: hidden; */
}

Ознакомьтесь с примером JsFiddle ниже:

https://jsfiddle.net/97g3o81s/11/