Колонны и ряды сгибаются

Question

Итак, у меня возникла проблема, из-за которой я в основном могу заставить работать свой flexbox, кроме случаев, когда речь идет о двух столбцах рядом с неровными рядами рядом друг с другом.Что касается моей жизни, я не могу понять, почему это не работает.

Вот скриншот того, как это выглядит сейчас: http://prntscr.com/ndig4v (по световой карте)

Вот HTML:

/* Stats */
#stats-container {
  width: 100%;
  height: 100%;
  border: 1px black solid;
}
#free-stats {
  width: 100%;
  height: 45%;
  border: 1px black solid;
}
#stats-column-one,
#stats-column-two {
  display: flex;
  flex-direction: column;
}
#stats-column-one {
  width: 75%;
}
#stats-column-two {
  width: 25%;
}
#stats-flex-one,
#stats-flex-two {
  display: flex;
  flex-direction: row;
}
#str-row,
#end-row,
#dex-row,
#eva-row,
#int-row,
#res-row,
#has-row {
  background: black;
  display: flex;
  flex-direction: row;
  position: relative;
  width: 55px;
  border: 1px yellow solid;
}

<div id="stats-container" class="yellow-black-shadow">
  <div id="free-stats">FS</div>
  <div id="stats-column-one">
    <div id="stats-flex-one">
      <div id="str-row">
        <div class="stat-icon"></div>
        <div id="str">SR</div>
      </div>
      <div id="dex-row">
        <div class="stat-icon"></div>
        <div id="dex">DR</div>
      </div>
      <div id="int-row">
        <div class="stat-icon"></div>
        <div id="int">IR</div>
      </div>
    </div>
    <div id="stats-flex-two">
      <div id="end-row">
        <div class="stat-icon"></div>
        <div id="str">ER</div>
      </div>
      <div id="eva-row">
        <div class="stat-icon"></div>
        <div id="eva">VR</div>
      </div>
      <div id="res-row">
        <div class="stat-icon"></div>
        <div id="res">RR</div>
      </div>
    </div>
  </div>
  <div id="stats-column-two">
    <div id="has-row">
      <div class="stats-icon"></div>
      <div id="has">HR</div>
    </div>
  </div>
</div>

В принципе все правильно, пока не дойдет до блока HR, он ДОЛЖЕН быть на правой стороне.Я хочу избегать использования float: right;

Я почти уверен, что делаю это в неправильном порядке, но я не уверен, в каком порядке я ошибаюсь.Я немного поиграл с этим, но каждая другая вещь, которую я пробую, кажется, ломается немного больше, это самое близкое, что я получил.

Answer 1

Я понял, я забыл порядок, в котором все должно работать, но вот исправление

HTML:

<div id="stats-container" class="yellow-black-shadow">
  <div id="free-stats">FS</div>
  <div id="stats-column-container">
    <div id="stats-column-one">
      <div id="stats-flex-one">
        <div id="str-row">
          <div class="stat-icon"></div>
          <div id="str">SR</div>
        </div>
        <div id="dex-row">
          <div class="stat-icon"></div>
          <div id="dex">DR</div>
        </div>
        <div id="int-row">
          <div class="stat-icon"></div>
          <div id="int">IR</div>
        </div>
      </div>
      <div id="stats-flex-two">
        <div id="end-row">
          <div class="stat-icon"></div>
          <div id="str">ER</div>
        </div>
        <div id="eva-row">
          <div class="stat-icon"></div>
          <div id="eva">VR</div>
        </div>
        <div id="res-row">
          <div class="stat-icon"></div>
          <div id="res">RR</div>
        </div>
      </div>
    </div>
    <div id="stats-column-two">
      <div id="has-row">
        <div class="stats-icon"></div>
        <div id="has">HR</div>
      </div>
    </div>
  </div>
</div>

Я просто завернул все это в другое содержимое div и добавил:

#stats-column-container {
  display: flex;
  flex-direction: row;
}

Я тоже полностью удалил

#stats-column-one,
#stats-column-two {
  display: flex;
  flex-direction: column;
}

Для справки о том, как это должно было выглядеть http://prntscr.com/ndijk0 (по световой карте)

Надеюсь, что это поможет кому-то лучше понять порядок в будущем, потому что это иногда смущает меня.