title: CSS FlexBox - child elements with different height?
body: <p>I am trying to design sub menus using FlexBox.</p>
  
  <p>FlexBox default behavior is to give equal size to all child elements.</p>
  
  <p>This causes all items to expand when a submenu is displayed.</p>
  
  <p>Is there someway to avoid this when using Flexbox?</p>
  
  <p>Codepen: <a href="https://codepen.io/dsomekh/pen/oeogGq" rel="nofollow noreferrer">https://codepen.io/dsomekh/pen/oeogGq</a></p>
  
  <pre><code>&lt;style&gt;
  .single_tag{
      display:flex;
      flex-direction:column;
      margin-right:6px;
      background-color:#ADD8E6;
      margin-bottom:6px;
      padding:2px;
      border-radius: 5px;
      border:2px solid red;
  
  }
  
  .container{
      display:flex;
  
      justify-content:center;
  }
  
  .dropdown-content {
      display: none;
      flex-direction:column;
  
  }
  
  .dropdown-content_second {
      display: none;
      flex-direction:column;
  
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .single_tag:hover .dropdown-content {
      display: flex;
  }
  
  &lt;/style&gt;
  &lt;html&gt;
  &lt;div class="container"&gt;
  &lt;div class="single_tag"&gt;First div
  &lt;div class="dropdown-content"&gt;
      &lt;a href="#"&gt;Link 1&lt;/a&gt;
      &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="single_tag"&gt;Second div
  &lt;div class="dropdown-content"&gt;
      &lt;a href="#"&gt;Link 1&lt;/a&gt;
      &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="single_tag"&gt;Third div
  &lt;div class="dropdown-content"&gt;
      &lt;a href="#"&gt;Link 1&lt;/a&gt;
      &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/html&gt;
  </code></pre>