高度在具有不同内容的 flex-box 行中自动更改

Question

我制作了一个可悬停的 flex-box 导航，其中包含一些父母、一些孩子，可能还有一些孙子（孩子自己也有孩子），我正在寻找一种方法让孩子的身高与内在孩子一起自动增长，同时其他孩子没有变化。 这是我的结果：

如您所见，“child2”没有内在孩子，但他们的身高也增加了。 我想在没有内在孩子的情况下保持“child2”高度。

这是我的代码：

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>

这就是我要找的东西

Answer 1

我想我找到了解决您问题的方法。我将一些分类添加到您的孙子元素的父元素中。我希望这能帮到您。我还添加了一些背景以便看清楚，但您可以将其删除。

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>

我希望它是这样的