When my div goes to the next line it is placed relative to the div with the greatest height on the line above it

Question

Basically I want all my divs to be just below its top sibling and not below its tallest top sibling. Moreover, I do not know in advance the number of divs that I would have and I do not know the size of them either. By the way the height of the divs (which in my example is defined by hand but is not in my real code) depends on the size of the text that my database returns to me, so my div can be either 400px height or 600px or 2000px etc.

Here is my code actually :

#container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#container > * {
    width: 13rem;
    margin: 0px 10px 25px 10px;
    box-sizing: border-box;
    display: inline-block;
}


/* The height of my div can change depending on the size of the text that my database returns to me. */
/* And I don't know how many columns my database will return to me either */

.column1{
  height: 100px;
  background-color: blue;
}

.column4{
  height: 800px;
  background-color: red;
}

.column2{
  height: 200px;
  background-color: orange;
}

.column3{
  height: 350px;
  background-color: crimson;
}

<div id="container">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="column3"></div>
  <div class="column2"></div>
  <div class="column4"></div>
  <div class="column3"></div>
  <div class="column1"></div>
</div>

If I was not clear on some points let me know.