Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position.

To streamline the code, I have extracted a portion 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;
}
 ...

The full code can be accessed here: I've experimented with adding padding but didn't see any changes. It's important that the border-radius doesn't interfere with the scrollbar. Can you please guide me on where I might be going wrong? Any assistance would be greatly appreciated. Thank you!

Answer №1

Scrollbars function in a specific way, so there's no need to worry about what you're doing wrong. You can adjust your design by adding padding on the top and bottom and only making the list part scrollable. Here's an example:

I introduced the .menu-wrap div, which shows how this approach can be implemented. I've defined its height as

100% - padding-top - padding-bottom
to ensure it fits within the available space.

There are certainly other methods to achieve the same result as well.

It's also important to tidy up your HTML code as it contains several errors. For instance, you had a ul element without any list items, which I addressed in my code. Additionally, using a button with an href attribute doesn't make sense. Titles should be marked as titles (h1, h2, h3...) for better structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

Within the WordPress PHP permalinks and Fancybox plugin, there are elements enclosed in an "a" tag like so: <a href="<?php the_permalink(); ?>" class="example" id="exampleid" data-fancybox-type="iframe"> <div class="exampledivclass"> ...

Can you show me how to achieve a smooth background color transition for a div that takes 2 seconds to complete when it is inserted into the DOM?

On my webpage, I have a list of items that are constantly being updated via a WebSocket connection to the backend. Each time a new item is added to the list, I would like it to be displayed with a background color transition lasting only a brief moment. ...

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

Element width shrinks inside container query

Can you explain why using container-type: inline-size renders the span normally but collapses the button? <span style="container-type: inline-size; outline: 1px solid blue;"> This is a span </span> <button style="container-type: inli ...

Divs are stubbornly resisting the urge to behave like block elements

.useless { float: right; clear: right; border: 1px dashed blue; height: 50px; width: 100%; } div.pretraga { border: 3px groove red; width: 20%; float: right; margin-right: 5%; border-top: 0; display: flex; justify-content: center; height: 250px; <div cl ...

Subheaders that stay in place while scrolling through a table with a stationary header

My goal is to design a table with a fixed header that allows the body to scroll under the header. While this is a common design, I am facing the challenge of implementing sticky subheaders. These subheaders should scroll along with the table until they rea ...

What steps are involved in implementing an ordering system on a restaurant's website using React?

As I work on developing my portfolio using React, I'm interested in incorporating an online ordering feature. However, the information I have found through Google so far hasn't fully addressed my questions. Can anyone provide guidance on the best ...

Troubleshooting issue with CSS SVG Clip path functionality - facing technical difficulties

Having an issue with a clip path in my CSS. When I apply the clip path to my CSS fill, the image isn't showing up... I'm using Chrome. Any ideas on how to fix this? I found this helpful generator https://example.com .card .content .picture img { ...

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

How come my audio element in HTML refuses to play once I adjust its volume setting?

I'm currently working through a React tutorial and I've encountered an issue with my component. I have implemented an audio HTML tag in the component, with its volume controlled by an input from another React component. However, despite setting u ...

Exploring the CSS scale transformation alongside the Javascript offsetHeight attribute

After combining offsetHeight with scale transformation, I experienced a strange result. Below is my simple HTML code: <body> <div id="id01"> Some Text </div> <div id="id02" style="transform-origin: left top; transf ...

Struggling to align form inputs next to each other

I have tried various methods such as adjusting padding and margins, using tables, displaying as inline and inline-block, and separating parts of the code into different divs. However, I am still unable to get my inputs to be displayed side by side. Here is ...

Change in navigation bar appearance on scroll down

I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

The ASP Classic site is not displaying the expected styles on its elements

Currently, I am revamping an ASP Classic website. The entire site relies on a major CSS file named Main which houses all the styles used. In this file, there are not many styles as the current design is quite basic. Some elements on certain pages have thei ...

What is the best way to make a line widget that has rounded edges at both the beginning and end?

I've been scouring the internet for a solution to this problem, but so far I haven't had any luck. My goal is to design a horizontal line with dots at each end, similar to this example. Does anyone know how I can achieve this using CSS? I atte ...

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

animation of leaping to a specific element

I am currently working on a sidebar with links that have a hover effect to add a bullet. However, I want the bullet to smoothly follow the cursor's movement along the y-axis within the sidebar instead of jumping between the links. How can I achieve th ...

Masking of the Navigation Button

I designed a responsive navigation bar, but in mobile view, the menu icon is being hidden by the menu headings when displayed. Check out the scenario below with a provided CodePen link. I attempted to adjust padding and float properties without success. An ...

Why does jQuery's .not(this) still identify the current row selected?

I have a table populated with data, each row ending in an icon marked with the "icon-size" and "edit" classes. I am trying to implement a feature where a selected row is highlighted with special emphasis borders. However, I am facing issues with toggling t ...