I have a drop-down list with an arrow at the top, given by a pseudo-element before:

body > nav .dropdown > menu { position: absolute; overflow: auto; max-height: calc(100vh - 150px); margin-top: 90px; border: 2px solid #aaaaaa; z-index: 9; background-color: #ffffff; } body > nav .dropdown > menu:before { content: ""; position: absolute; top: -17px; left: calc(50% - var(--caret-position)); width: 30px; height: 30px; border: solid #aaaaaa; border-width: 2px 0 0 2px; background-color: #ffffff; transform: translateX(-50%) rotate(45deg); }

And I want to scroll in the list if it exceeds a certain height value. But since before is outside the bounds of the element, when you add "overflow: auto" it is hidden. Is it possible to make it not to hide without adding additional elements to html?

    1 answer 1

    As an option, wrap the child elements of the list with a div and it is for him to put overflow-y: auto .

     .list { display: block; width: 200px; height: 200px; background: gray; position: relative; margin-top: 20px; padding: 10px; box-sizing: border-box; } .list::before { content: ''; display: block; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: gray; position: absolute; left: calc(50% - 20px); top: -20px; } .wrap { display: block; width: 100%; height: 100%; overflow: hidden auto; } .item { display: block; width: 100%; height: 50px; background: blue; margin-bottom: 10px; } 
     <div class="list"> <div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>

    • It is necessary without changing the current structure of the elements. That is, only the "list> before + elements". - Ikor Jefocur
    • @IkorJefocur, then nothing. You can wrap JSom if you do not want to touch html. - CbIPoK2513