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>
Share:
10,055

Related videos on Youtube

David Somekh
Author by

David Somekh

I really interest you that much that you would read this?

Updated on September 16, 2022

Comments

  • David Somekh
    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>