height automaticaly change in flex-box rows with different contents

user_14192591 0
Viewed 56

i made a hover-able flex-box nav which contains some parents, some children and probably some grand-children (children has child themselves), I'm looking for a way to make child's height with inner child grow automatically while other children doesn't change. this is my result: enter image description here

as you can see "child2" has no inner child but their height increase too. i want "child2" height stay fix while there is no inner child.

this is my code:

nav{
  direction:rtl;
}
.menu-dropdown {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.menu-dropdown-parent {
    list-style-type: none;
    margin: auto 25px;
}

.menu-dropdown-child-container li{
    display: none;
}

.menu-dropdown-parent:hover .menu-dropdown-child-container li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 5px 20px;
}

.menu-dropdown{
    height: 40px;
    background-color: #f3f0e9;
}

.menu-dropdown-child-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: absolute;
    right: 0px;
    width: 100%;
    margin-top: 8px;
    padding: 0px;
    flex-wrap: wrap;
    text-align: right;
}

.menu-dropdown-grandChild-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px;
}
<nav>
            <div class="menu-container">
                <ul class="menu-dropdown">
                    <li class="menu-dropdown-parent">parent1
                        <ul class="menu-dropdown-child-container">
                            <li>child1
                                <ul class="menu-dropdown-grandChild-container">
                                    <li>grandchild</li>
                                    <li>grandchild</li>
                                    <li>grandchild</li>
                                    <li>grandchild</li>
                                    <li>grandchild</li>
                                </ul>
                            </li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                            <li>child2</li>
                        </ul>
                    </li>
                    <li class="menu-dropdown-parent">parent2
                        <ul class="menu-dropdown-child-container">
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                            <li>parent2-child</li>
                        </ul>
                    </li>
                    <li class="menu-dropdown-parent">parent3</li>
                    <li class="menu-dropdown-parent">parent4</li>
                    <li class="menu-dropdown-parent">parent5</li>
                    <li class="menu-dropdown-parent">parent6</li>
                    <li class="menu-dropdown-parent">parent7</li>
                </ul>
            </div>
        </nav>

enter image description here

this is what i am looking for

flexbox css-grid css html
1 Answers

I think I found a solution to your problem. I add some classed to your grandchild's elements parent element. I hope this will help you. I also add some background to see clearly but you can delete it.

nav{
  direction:rtl;
}
.menu-dropdown {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.menu-dropdown-parent {
    list-style-type: none;
    margin: auto 25px;
}

.menu-dropdown-child-container li ,  
.menu-dropdown-grandChild-container li{
    display: none;
}


.menu-dropdown-parent:hover .menu-dropdown-child-container li,.menu-dropdown-child-parent:hover
.menu-dropdown-grandChild-container li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 5px 20px;
}
.menu-dropdown{
    height: 40px;
    background-color: #f3f0e9;
}

.menu-dropdown-child-container ,.menu-dropdown-grandChild-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: absolute;
    right: 0px;
    width: 100%;
    margin-top: 8px;
    padding: 0px;
    flex-wrap: wrap;
    text-align: right;
}

.menu-dropdown-grandChild-container{
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px;
    background-color: #f3f0e9;
    width: 100px;
    margin-top: 24px;
}
<body>
  <nav>
    <div class="menu-container">
        <ul class="menu-dropdown">
            <li class="menu-dropdown-parent">parent1
                <ul class="menu-dropdown-child-container">
                    <li class="menu-dropdown-child-parent">child1
                        <ul class="menu-dropdown-grandChild-container">
                            <li class="gc-li">grandchild</li>
                            <li class="gc-li">grandchild</li>
                            <li class="gc-li">grandchild</li>
                            <li class="gc-li">grandchild</li>
                            <li class="gc-li">grandchild</li>
                        </ul>
                    </li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                    <li>child2</li>
                </ul>
            </li>
            <li class="menu-dropdown-parent">parent2
                <ul class="menu-dropdown-child-container">
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                    <li>parent2-child</li>
                </ul>
            </li>
            <li class="menu-dropdown-parent">parent3</li>
            <li class="menu-dropdown-parent">parent4</li>
            <li class="menu-dropdown-parent">parent5</li>
            <li class="menu-dropdown-parent">parent6</li>
            <li class="menu-dropdown-parent">parent7</li>
        </ul>
    </div>
  </nav>
</body>

I want it to be like this

enter image description here

user_153474940
Related