flexbox height adjust to content
<p>I use a &quot;full design&quot; flexbox.
I have a weird issue : I have a container that takes all the remaining space and I want in this container that the child, which is also flexbox, to have their height adjust to their content.</p>
<p>Here is the issue:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
  width:100%;
  height:100%;
  display:flex;
}

.container {
  display:flex;
  flex:1;
  flex-wrap:wrap;
}

.icon {
  width:10vh;
  margin:10px;
  display:flex;
  flex-direction:column;
}
.img {
  width:10vh;
  height:10vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:red;
}

.text {
  text-align:center;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
&lt;div class="icon"&gt;
&lt;div class="img"&gt;
&lt;/div&gt;
&lt;div class="text"&gt;
action 1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="icon"&gt;
&lt;div class="img"&gt;
&lt;/div&gt;
&lt;div class="text"&gt;
Action 2
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="icon"&gt;
&lt;div class="img"&gt;
&lt;/div&gt;
&lt;div class="text"&gt;
Action 3
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="icon"&gt;
&lt;div class="img"&gt;
&lt;/div&gt;
&lt;div class="text"&gt;
Action 4
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="icon"&gt;
&lt;div class="img"&gt;
&lt;/div&gt;
&lt;div class="text"&gt;
Action 5
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>As you can see, the icon takes the full height of the container : in fact, I don't want to specify a height because I don't know the text length and really want that, if the content is huge, the icon takes the height of its content ( don't want to cut the text). Moreover, if the page is resized, I really want the icon to be aligned (like on smartphone).</p>
<p>Also, I don't understand why the icon takes the height of its parent and not its content because I didn't specify &quot;flex:1&quot; on it. I assume that the default behaviour it's to fit the content size, but this seems not to be working.</p>
<p><a href="https://i.stack.imgur.com/Nv2ED.png" rel="nofollow noreferrer">image of the issue</a></p>