Can't remove the scroll bar of a scroll area in bootstrap - html

Question

I have creted this page in html & css. I have a section with a scroll bar inside the page and for small size it appears like this:
enter image description here
I don't want 2 scrollbars to be there so I want to remove the scrollbar of this section for small sizes. Here is my code:
<div class="account-left">
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section">
<!--<h1 style="color:black;">{{hais}}</h1>-->
<div style="text-align: center; background: #eee;">
<span ng-show="tasklist.options.no_tasks" ng-bind-html="tasklist.options.no_tasks.message"></span>
</div>
<ul>
<li >Print smth</li>
<li >Print smth</li>
<li >Print smth</li>
</ul>
<a class="loadmore" ng-hide="1" href="javascript:void(0)" ng-click="loadMore(loadvalue, activeTab)">Load more</a>
</div>
</div>
</div>
Since I have a scroll-area, I cant make it hide-sm because this removes all the area of scrolling and I want to remove only the scroll bar.Is there any way? Thanks.I'm using bootstrap.
After inserted this to my code like in the answer below:
<div class="account-left">
<div style=" width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;">
<div class="section">
//etc the same part of code which is above
My result is this:
enter image description here
But no scrolling

Answer 1

try this in css
your_div { overflow-y: hidden; }

Answer 2

.yourdiv {
overflow-x: hidden;
overflow-y: scroll;
}
.yourdiv::-webkit-scrollbar {
display: none;
}
Assuming that your other styles about div's and containers are correct, this should work.
To know more about this topic visit this link. There is a clear explanation of how browsers work with scrollbars and how can we hide them in a cross-browser compatibility approach. In case of my solution doesn't work, I'm almost sure you will find your solution over the link explanation.