Flexbox row won't work, forces column layout

Question

I try to learn flexbox and do some project using it but whenever I set my container to display: flex my rows are turned into columns and flex-direction property like doesn't respond, it won't make them into rows.

What am I doing wrong? I'm going insane because of this, current code looks like this:

.container {
  width: 60vw;
  height: 45vw;
  display: flex;
}

.row {
  flex-basis: 300px;
  flex-direction: row;
}

<div class="container">
  <div class="row" style="background: red"></div>
  <div class="row" style="background: blue"></div>
</div>

Answer 1

For the items to stack vertical and create rows, you set the direction to column

Note, the property flex-direction should be set on the flex container, not its items

.container {
  width: 60vw;
  height: 45vw;
  display: flex;
  flex-direction: column;
}

.row {
  flex-basis: 300px;
}

<div class="container">
  <div class="row" style="background: red"></div>
  <div class="row" style="background: blue"></div>
</div>