CSS FlexBox - child elements with different height?

I am trying to design sub menus using FlexBox.

FlexBox default behavior is to give equal size to all child elements.

This causes all items to expand when a submenu is displayed.

Is there someway to avoid this when using Flexbox?

Codepen: https://codepen.io/dsomekh/pen/oeogGq

<style>
.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;
}

</style>
<html>
<div class="container">
<div class="single_tag">First div
<div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<div class="single_tag">Second div
<div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<div class="single_tag">Third div
<div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


</html>