可滚动下拉菜单不完全可见

Question

我有一个导航栏，右侧有一个可滚动的下拉项（购物车视图）。
问题是，如果购物车中有不止一件商品，下拉列表的顶部将不再可见。
你能告诉我问题出在哪里吗？
这是 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做的，不过我觉得这个不是很重要。谢谢！

Answer 1

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

可滚动下拉菜单不完全可见

Scrollable dropddown not fully visible

html

css

scroll

nav

dropdown