Putting scrollbar inside the div-CodePudding

I'm trying to put my vertical scrollbar inside my div, but I'm unable to move it

I extracted part of the code in order to avoid spam of codes. See below:

 .toprightcontrols {
     margin: 0 3% 0 0;
     display: flex;
     position: absolute;
     justify-content: flex-end;
     top: 0;
     width: 150px;
     flex-wrap: wrap;
}
 #mymenu{
    padding:10px;
    background:none;
    border:0;
    outline:0;
    cursor:pointer;
    align-self:center;
    justify-self:right;
}
 #mymenu:before{
    content:url(http://127.0.0.1/img/blog/list.png);
}
 .menu-title{
    display:flex;
    justify-content:center;
}
 .dropdown-toggle:after{
    display:block!important;
}
 .hr{
    margin:5px 5px 10px 5px;
}
 .country{
    background:#555;
    color:#fff;
    font-size:0.7rem;
    display:inline-block;
    padding:0px 3px;
}


 button{
    margin:0;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
}
 .dropdown-toggle{
    white-space:nowrap;
}
 .dropdown-toggle::after{
    display:inline-block;
    margin-left:.255em;
    vertical-align:.255em;
    content:"";
    border-top:.3em solid;
    border-right:.3em solid transparent;
    border-bottom:0;
    border-left:.3em solid transparent;
}
 .dropdown-toggle:empty::after{
    margin-left:0;
}
 *,::after,::before{
    box-sizing:border-box;
}
 hr{
    margin:1rem 0;
    color:inherit;
    background-color:currentColor;
    border:0;
    opacity:.25;
}
 hr:not([size]){
    height:1px;
}
 .dropdown-menu{
    position:absolute;
    top:100%;
    z-index:1000;
    display:block;
    min-width:10rem;
    max-height:calc(4 * 200%)!important;
    padding:.5rem 0;
    margin:0;
    font-size:1rem;
    color:#212529;
    text-align:left;
    list-style:none;
    background-color:rgba(162, 162, 162, 1);
    background-clip:padding-box;
    border-radius:13px;
    transition:all 1s ease;
    overflow-y:auto;
}
 #dropdown-menu::-webkit-scrollbar-track{
    border-radius:500px;
    background-color:rgba(162, 162, 162, 1);
}
 #dropdown-menu::-webkit-scrollbar{
    box-sizing:border-box;
    width:6px;
    background-color:rgba(162, 162, 162, 1);
}
 #dropdown-menu::-webkit-scrollbar-thumb{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow:inset 0 0 6px rgba(0, 0, 0, .3);
    background-color:rgb(226, 209, 209);
}
 .dropdown-menu.show{
    display:block;
    position:absolute;
    inset:0px auto auto 0px;
    margin:0px;
    transform:translate(10px, 50.303px);
    transition:all 1s ease;
}
 .radio-label{
    position:relative;
    display:inline-block;
    margin:10px;
}
 .radio-label input{
    opacity:0;
    position:absolute;
}
 .radio-label .inner-label{
    position:relative;
    display:inline-block;
    padding-left:25px;
    cursor:pointer;
}
 .radio-label .inner-label:before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    border-bottom:1px dashed rgba(0, 0, 0, 0.2);
    width:15px;
}
 .radio-label input:checked .inner-label:before{
    border-bottom:1px solid rgba(0, 0, 0, 0.75);
}
 .radio-label input:checked .inner-label:after{
    content:"✓";
    color:rgba(30, 30, 30, 0.8);
    position:absolute;
    font-size:12px;
    left:5px;
    top:1px;
}

<div >
    <div  id="dropdown">
        <button  id ="subtitles" href="#"  id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"></button>
        <ul  id="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <div > <span>My list</span></div>
            <hr >
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test' checked='checked'>
                <span >Disabled</span>
            </label>
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test2'>
                <span >English <div >EN</div></span>
            </label>
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test3'>
                <span class='inner-label'>French <div >YY</div></span>
            </label>
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test4'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test5'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test6'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
            <label class='radio-label'>
                <input name='ddtest' type='radio' id='test7'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
        </ul>
    </div>
</div>

The final result must be something like this =>

I tried using padding but but got nothing different. Note that the border-radius must not conflict with the scrollbar.

Where am I doing wrong? Could you help me? Thanks

CodePudding user response：

You are not doing anything wrong, this is just how scrollbars work. You can adapt your design and work with a padding on top / bottom and only make the list-part scrollable. Something like this:

I added the .menu-wrap div, see it's CSS how this can work. I set the height of it to 100% - padding-top - padding-bottom so it fit's into the space.

There are for sure also other ways to get this to work.

You should also clean up your HTML, it is full of errors. You have a ul without any list elements, I changed this in my code. A button with href also doesn't make sense. And a title should be a title (h1, h2, h3... )

.toprightcontrols {
  margin: 0 3% 0 0;
  display: flex;
  position: absolute;
  justify-content: flex-end;
  top: 0;
  width: 150px;
  flex-wrap: wrap;
}

#mymenu {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
}

#mymenu:before {
  content: url(http://127.0.0.1/img/blog/list.png);
}

.menu-title {
  display: flex;
  justify-content: center;
}

.dropdown-toggle:after {
  display: block!important;
}

.hr {
  margin: 5px 5px 10px 5px;
}

.country {
  background: #555;
  color: #fff;
  font-size: 0.7rem;
  display: inline-block;
  padding: 0px 3px;
}

button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

*,
::after,
::before {
  box-sizing: border-box;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: .25;
}

hr:not([size]) {
  height: 1px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: block;
  min-width: 10rem;
  padding: .5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: rgba(162, 162, 162, 1);
  background-clip: padding-box;
  border-radius: 13px;
  transition: all 1s ease;
  padding: 20px 0;    
  height: calc(4 * 200%)!important;

}

/**/
.menu-wrap {
  overflow: auto;
  max-height: calc(100% - 40px); /* 100% - 20px padding top - 20px padding bottom*/
}

#dropdown-menu::-webkit-scrollbar-track {
  border-radius: 500px;
  background-color: rgba(162, 162, 162, 1);
}

#dropdown-menu::-webkit-scrollbar {
  box-sizing: border-box;
  width: 6px;
  background-color: rgba(162, 162, 162, 1);
}

#dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(226, 209, 209);
}

.dropdown-menu.show {
  display: block;
  position: absolute;
  margin: 0px;
  transform: translate(10px, 50.303px);
  transition: all 1s ease;
}

.radio-label {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.radio-label input {
  opacity: 0;
  position: absolute;
}

.radio-label .inner-label {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  cursor: pointer;
}

.radio-label .inner-label:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  width: 15px;
}

.radio-label input:checked .inner-label:before {
  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}

.radio-label input:checked .inner-label:after {
  content: "✓";
  color: rgba(30, 30, 30, 0.8);
  position: absolute;
  font-size: 12px;
  left: 5px;
  top: 1px;
}

<div >
  <div  id="dropdown">
    <button  id="subtitles" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"></button>
    <div  id="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <div > <span>My list</span></div>
      <hr >
      <div >
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test' checked='checked'>
                <span >Disabled</span>
            </label>
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test2'>
                <span >English <div >EN</div></span>
            </label>
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test3'>
                <span class='inner-label'>French <div >YY</div></span>
            </label>
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test4'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test5'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test6'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
        <label class='radio-label'>
                <input name='ddtest' type='radio' id='test7'>
                <span class='inner-label'>French <div >XX</div></span>
            </label>
      </div>
    </div>
  </div>
</div>