How to determine width on responsive scroll menu - html

Question

I'm using this tutorial to build scrolling menu once the screen size is smaller.
I also want to add border with width element, but once I define width the scrolling: auto; element is override. My target is creating border with width and still keep the scrolling auto element working once the screen is minimized.
Codepen with width defined
Codepen with undefined width
.scrollmenu-container{
margin: 0 auto;
width: 500px;
border-bottom: 2px solid #eee;
}
div.scrollmenu {
text-align: center;
margin: 0 auto;
overflow: auto;
white-space: nowrap;
border-bottom: 2px solid #eee;
}
div.scrollmenu a {
display: inline-block;
color: grey;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
color: #24d175;
}
<div class="scrollmenu-container">
<div class="scrollmenu">
<a>הכל</a>
<a>USB</a>
<a>מטענים</a>
<a>מתאמים</a>
<a>גדאג'טים למחשב'</a>
</div>
</div>
How can I define width for border without override scrolling auto element?

Answer 1

Give a specific width to .scrollmenu class and use overflow-X: scroll; in media query for small devices. I have added media query for mobile devices.
Hope this Helps.
.scrollmenu-container{
margin: 0 auto;
width: 500px;
border-bottom: 2px solid #eee;
}
div.scrollmenu {
text-align: center;
margin: 0 auto;
white-space: nowrap;
border-bottom: 2px solid #eee;
}
div.scrollmenu a {
display: inline-block;
color: grey;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
color: #24d175;
}
#media (max-width:767px){
div.scrollmenu{max-width:300px; overflow-X: scroll;}
}
<div class="scrollmenu-container">
<div class="scrollmenu">
<a>הכל</a>
<a>USB</a>
<a>מטענים</a>
<a>מתאמים</a>
<a>גדאג'טים למחשב'</a>
</div>
</div>

Answer 2

.scrollmenu-container{
margin: 0 auto;
width: 500px;
border-bottom: 2px solid #eee;
}
div.scrollmenu {
text-align: center;
margin: 0 auto;
overflow: auto;
white-space: nowrap;
border-bottom: 2px solid #eee;
}
div.scrollmenu a {
display: inline-block;
color: grey;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
color: #24d175;
}
.menu-wrapper{
width:100%;
overflow:auto;
}
<div class="menu-wrapper">
<div class="scrollmenu-container">
<div class="scrollmenu">
<a>הכל</a>
<a>USB</a>
<a>מטענים</a>
<a>מתאמים</a>
<a>גדאג'טים למחשב'</a>
</div>
</div>
</div>
May be those code snippets help your question. I put a wrapper around menu and set a style for it. It scrolls when page size gets smaller.