Search code examples
htmlcssscrolldropdownnav

Scrollable dropddown not fully visible

I have a navbar with a scrollable dropdown item(cart view) to the right side of it.
The problem is that if there are more than one item in the cart, the top part of the dropdown it is not visible anymore.
Could you please tell me where is the problem?
This is the 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>

And this is the 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;
}

The project is done in ReactJS, but I think that this is not so important. Thank you!

Solution

  • You centered vertically your elements in .dropdown-content with justify-content: center; To fix it, you need to change it to justify-content: flex-start; and normally it'll works.