我有一个导航栏，它的右侧有一个可滚动的下拉项目(购物车视图(。
问题是，如果购物车中有多个项目，则下拉列表的顶部将不再可见
你能告诉我哪里出了问题吗
这是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中完成的，但我认为这并不那么重要。非常感谢。
使用justify-content: center;垂直居中.dropdown-content中的元素要修复它，您需要将其更改为justify-content: flex-start;，通常情况下它会起作用。