CSS Flexbox: how to change the width of the element
<p>I'm using Flexbox in CSS. In the next link, you can see three squares lying one above the other: <a href="http://codepen.io/CrazySynthax/pen/PbLjMO" rel="nofollow noreferrer">http://codepen.io/CrazySynthax/pen/PbLjMO</a>
The first square is the smallest and the last square is the biggest. My question is how to draw these squares that their height will be identical, but their width will differ, so they will look like this: </p>

<blockquote>
<pre><code>---
------
---------
</code></pre>
</blockquote>

<p>This is the code:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="square"&gt; &lt;/div&gt;
  &lt;div class="square"&gt; &lt;/div&gt;
  &lt;div class="square"&gt; &lt;/div&gt;
&lt;/div&gt;


html, body { 
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  displax: flex;
}
.container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow:column wrap;
  justify-content:space-around;

}
.square {
  flex:1 1 auto;
  background-color:gray;
  border:solid;
  margin: 1em;
}

.square:nth-child(1) { 
  flex-grow: 1
}

.square:nth-child(2) { 
  flex-grow: 2
}

.square:nth-child(3) { 
  flex-grow: 5
}
</code></pre>