0

I have something similar to this https://codepen.io/cassandraPaige/pen/ZEYmMJg. So i want to add an vertical scroll in nav

`
nav {
    position: fixed;
    left: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    height: 100vh;
    background: var(--secondary-color);
    overflow-y:auto;
}`

But in small resolutions, when show scroll, the first element is unreachable by scroll:

enter image description here

All elements is not showing, especially the first element is not visible

enter image description here

Mvram
  • 434
  • 1
  • 5
  • 20
  • 1
    Does this answer your question? [Why does space-around allow flex items to overflow on the left side?](https://stackoverflow.com/questions/34453864/why-does-space-around-allow-flex-items-to-overflow-on-the-left-side) With `justify-content: space-around`: "If the leftover free-space is negative ... this value is identical to center." Try using `space-between` instead, [demonstrated here](https://jsfiddle.net/fcxnvsgh/). – showdev Mar 18 '21 at 20:44
  • Indeed, that answer solves my problem, thanks a lot!! – Mvram Mar 18 '21 at 20:55
  • 1
    Awesome! My first time learning about that, too :) – showdev Mar 18 '21 at 21:00

0 Answers0