CSS FlexBox - child elements with different height?
10,055
Yes.
align-items: flex-start;
on your .container
will work.
.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;
align-items: flex-start;
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;
}
<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>
<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>
Related videos on Youtube

Author by
David Somekh
I really interest you that much that you would read this?
Updated on September 16, 2022Comments
-
David Somekh 3 months
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>