'How to prevent a centered aligned flex item from going up as its height increases?

I'm trying to build a dropdown menu, but its div (which is position static) keeps going up as I add new items to the menu.

It's the align-items:center rule that keeps repositioning the item so it's properly vertically aligned.

If I discard this rule, it'll break the navbar, the other items won't be centered as I intended.

If I use the display property, as the code bellow shows, the button starts where I want but whenever I click on it, it goes out of its place.

const dropdown = () => {
    let display = document.getElementById("menu").style.display;
    
    document.getElementById("menu").style.display = (display === "none") ? "block":"none";
    //toggling "visibility" takes the div out of its place
 }
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height:160px;
    border:1px solid black;
    text-align: center;    
}

.dropdownContainer {
    margin-left: auto;
}

#drop {
  display:none;
  /* visibility:hidden;*/
}
<nav class="nav">
    <div>Irrelevant elements to this question</div>
    <div class="dropdownContainer">
        <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> 
        <div id="menu">
            <!-- the more items added here, the more up the page the whole container goes -->
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </div>
</nav>

If I change the JS code so it toggles the visibility property instead, the button already starts out of its intended position but it also doesn't change place when its clicked on.

How can I keep the button centered as it is and make the menu drop down without changing the button's place?

javascripthtmlcssflexboxdropdown


Solution 1:[1]

I Think that's what you want to achieve:

I positioned your menu underneath the button with position absolute. so the button won't change its position.

const dropdown = () => {
    let display = document.getElementById("menu").style.display;
    
    document.getElementById("menu").style.display = (display === "none") ? "block":"none";
    //toggling "visibility" takes the div out of its place
 }
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
  border: 1px solid black;
  text-align: center;
}

.dropdownContainer {
  margin-left: auto;
  position: relative;
}

#drop {
  display: none;
  /* visibility:hidden;*/
}
#menu {
  position: absolute;
  top: 100%;
}
<nav class="nav">
    <div>Irrelevant elements to this question</div>
    <div class="dropdownContainer">
        <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> 
        <div id="menu">
            <!-- the more items added here, the more up the page the whole container goes -->
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </div>
</nav>

Solution 2:[2]

const dropdown = () => {
    let display = document.getElementById("menu").style.display;
    
    document.getElementById("menu").style.display = (display === "none") ? "block":"none";
    //toggling "visibility" takes the div out of its place
 }
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height:160px;
    border:1px solid black;
    text-align: center;    
}

.dropdownContainer {
    margin-left: auto;
}

#drop {
  display:none;
  /* visibility:hidden;*/
}
#menu{
 display: block;
 position: absolute;
 height: 60px;
 overflow-y: auto;
 width: 80px;
}
<nav class="nav">
    <div>Irrelevant elements to this question</div>
    <div class="dropdownContainer">
        <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> 
        <div id="menu">
            <!-- the more items added here, the more up the page the whole container goes -->
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </div>
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 YourBrainEatsYou
Solution 2 Yash porwal

Related Questions