Changing flex-direction makes my divs disappear

Question

I am fairly new at css, and I am trying to get some practice in it.

I want to make two different divs (inside same parent div) to be on opposite sides of each other.

However, when I change my flex-direction from 'column' to 'row', my divs disappear.

#assignments-wrapper {
  padding: 1.5rem;
}

.assignment {
  min-height: 40px;
  margin-bottom: .5rem;
  background: black;
  display: flex;
}

.red {
  width: 5%;
  height: 40px;
  background: #DC3220;
}

.green {
  width: 5%;
  height: 40px;
  background: #1AFF1A;
}

.blue {
  width: 5%;
  height: 40px;
  background: #1A85FF;
}

#row7 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#first .red {
  height: 10px;
  width: 10%;
}

#first .green {
  height: 15px;
  width: 10%;
}

#second .red {
  height: 10px;
  width: 10%;
}

#second .green {
  height: 15px;
  width: 10%;
}

<div id="assignments-wrapper">
  Row 7
  <div class="assignment" id="row7">
    <div id="first">
      <div class="green"></div>
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div id="second">
      <div class="green"></div>
      <div class="red"></div>
      <div class="green"></div>
    </div>
  </div>
</div>

With flex-direction:column:

With flex-direction:row:

Desired outcome (ignore width/height of colors, screenshots were not sized properly):

I added flex to all ids, nothing changed.

Answer 1

Your code with flex-direction: row worked just fine. However, you could not see it because of a completely different issue.

if you have a value in percent for width or height then it means percent-wise-relative to the parent element. width: 10% means 10% of the width of #first and #second. However, the width within Flexbox is calculated to fit-content. As the those elements have no (visual) content the width of those elements will be 0. 10% of 0 equals also 0! This means your both boxes had no width and therefor wheren't not visual for you. Just add a defined width such as 5vw to .green and .red and you see it works just fine:

#assignments-wrapper {
  padding: 1.5rem;
}

.assignment {
  min-height: 40px;
  margin-bottom: .5rem;
  background: black;
  display: flex;
}

.red {
  width: 5%;
  height: 40px;
  background: #DC3220;
}

.green {
  width: 5%;
  height: 40px;
  background: #1AFF1A;
}

#row7 {
  display: flex;
  flex-direction: row;
    justify-content: space-between;
}

.red,
.green {
  width: 5vw;
}

#first .red,
#second .red {
  height: 10px;
}

#first .green,
#second .green {
  height: 15px;
}

<div id="assignments-wrapper">
  Row 7
  <div class="assignment" id="row7">
    <div id="first">
      <div class="green"></div>
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div id="second">
      <div class="green"></div>
      <div class="red"></div>
      <div class="green"></div>
    </div>
  </div>
</div>