fill cross axis space in a wraped flex

Question

I have This flex structure that is filled with div elements that I don't know what their height is going to be. and my code goes like this:

.container{
  display:flex;
  width:300px;
  flex-wrap: wrap;
  border: solid 1px black;
}

.container div{
  width:140px;
  margin: 2px;
  flex:1 0 auto;
  border: solid 1px black;
  align-self:start;
}

.one{
  background:red;
}
.two{
  background:green;
}
.three{
  background:blue;
  color:white;
}
.four{
  background:yellow;
}
.five{
  background:red;
}
.six{
  background:pink;
}

<div class="container">
  <div class="one" >
    <p>1</p>
    <p>1</p>
  </div>
  <div class="two" >
    <p>2</p>
  </div>
  <div class="three" >
    <p>3</p>
    <p>3</p>
    <p>3</p>
 </div>
  <div class="four" >
    <p>4</p>
    <p>4</p>
    <p>4</p>
    <p>4</p>
    <p>4</p>
 </div>
  <div class="five" >
    <p>5</p>
    <p>5</p>
 </div>
  <div class="six" >
    <p>6</p>
    <p>6</p>
    <p>6</p>
 </div>
</div>

this is what I'm getting:

I wanna get rid of the horizontal space between elements, the result that I wanna get is something like this:

How can I do that?