可滚动的下拉菜单不完全可见答案

【问题标题】：Scrollable dropddown not fully visible可滚动的下拉菜单不完全可见
【发布时间】：2022-01-15 01:35:21
【问题描述】：

我有一个导航栏，其右侧有一个可滚动的下拉项目（购物车视图）。
问题是如果购物车中有多个商品，则下拉列表的顶部不再可见。
你能告诉我问题出在哪里吗？
这是html：

 <body>
    <div id="root">
        <div class="App">
            <nav>
                <div class="links">
                    Something, something
                </div>
                <div class="asd">
                    bla
                </div>
                <div class="grand-parent">
                    <div class="bro">
                        bla
                    </div>
                    <div>

                    </div>
                    <div class="dropdown">
                        <div class="dropdown-content">

                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</body>

这是 CSS：

.App {
    padding: 0;
    margin: 0;
    color: #1D1F22;
}

nav {
    display: flex;
    position: fixed;
    justify-content: space-between;
    z-index: 9990;
    top: 0;
    width: 100%;
    background-color: white;
    font-size: 1.2rem;
    margin-left: 70px;
    height: 80px;
}

.links {
    justify-self: flex-start;
    position: relative;
}
.asd {
    align-self: center;
    position: relative;
}

.grand-parent {
    right: 100px;
    text-align: center;
    position: relative;
    height: 90vh;
}

.bro {
    position: relative;
    padding: 0;
    height: 3px;
    width: 6px;
    margin-right: 170px;
    margin-top: 30px;
}

.dropdown {
    position: absolute;
    display: inline-block;
    height: 90vh;
}

.dropdown-content {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    width: 325px;
    z-index: 9999;
    border: 1px solid black;
    justify-content: center;
    align-items: center;
    max-height: 90vh;
    overflow-y: auto;
    background-color: white;
    overflow-x: hidden;
}

该项目是在 ReactJS 中完成的，但我认为这不是那么重要。谢谢！

【问题讨论】：

在进一步查看之前，您是否注意到grand-parent 中有错字？
@Sven 不，我没有注意到那个错字，谢谢！

标签： html css scroll dropdown nav

【解决方案1】：

您将.dropdown-content 中的元素与justify-content: center; 垂直居中要修复它，您需要将其更改为 justify-content: flex-start; 并且通常它会起作用。

【讨论】：

非常感谢。有效。我在想问题可能出在.dropdown-content 及其父母的位置。如果可能，您能否解释一下为什么您的答案是解决方案？
因为您的下拉内容具有最大高度，并且您的内容大于最大高度。并且您添加了一个对齐中心，因此您不允许滚动您的内容垂直居中