滚动正常，但滚动条未显示在谷歌浏览器中

Question

我遇到的问题是滚动正常，但默认滚动条在Google Chrome和IE浏览器的div中不可见。

我在div标记中有一个简单的HTML li，我想在div中显示垂直滚动。我尝试通过应用display: block覆盖现有CSS。但是，滚动正常，但滚动条不可见。

我正在使用Ext JS 6.5.3。我有Box.scss文件，其中一些代码是由Ext JS编写的。而且我正在尝试覆盖该代码，但仍然无法正常工作。

/* Box.scss code*/

// Best effort to not scroll scroll indicators.
// But do not hide scrollable component inside the box

.#{$prefix}box-scroller-body-vertical,
.#{$prefix}box-scroller-body-horizontal {
    -ms-overflow-style: none;
    .#{$prefix}scroller {
        -ms-overflow-style: auto;
    }
    :not(.#{$prefix}scroller)::-webkit-scrollbar {
        display: none;
    }
}

<li style="width: 400px;" id="ext-element-11" class="open">
	<a style="" href="javascript:void(0);" class="drop fa fa fa-cogs glow" onmouseover="" onlclick="">
		&nbsp;
		<span style="float:left;" class="clsMenuTreeSpan">
			<p style="width: 100%;margin:0px;white-space: nowrap;" id="ext-element-18">System</p>
		</span>
	</a>
	<div style="max-height: 100px; overflow-x: hidden; max-width: 1776px; top: 60px; left: 134px;" class="dropdown_4columns">
		<div style="float: left;">
			<h3 style="font-weight:bold;">
				<span style="float:left;" class="clsMenuTreeSpan">
					<p style="width: 100%;margin:0px;white-space: nowrap;">Admin</p>
				</span>
			</h3>
			<ul>
				<li>
					<a style="white-space:normal; " class="fa " onmouseover="" onmousedown="">
						<span style="padding-right:15px;style=" float:left''="">Alarm Groups</span>
						<span data-qtip="Bookmark this display" viewname="AlarmGroups" role="STARBUTTON" class="x-menu-item-favorite"></span>
					</a>
				</li>
				<li>
					<a style="white-space:normal; " class="fa " >
						<span style="padding-right:15px;style=" float:left''="">Alarm Type</span>
						<span data-qtip="Bookmark this display" viewname="oatialarmtypesummary" role="STARBUTTON" class="x-menu-item-favorite"></span>
					</a>
				</li>
				<li>
					<a style="white-space:normal; " class="fa ">
						<span style="padding-right:15px;style=" float:left''="">Background Job Settings</span>
						<span data-qtip="Bookmark this display" viewname="oATIDataCleanUp" role="STARBUTTON" class="x-menu-item-favorite"></span>
					</a>
				</li>
				
			</ul>
		</div>
	
	</div>
</li>

.flatmenuhorizontalcss .dropdown_4columns .x-box-scroller-body-vertical :not(.x-scroller)::-webkit-scrollbar,
.x-box-scroller-body-horizontal :not(.x-scroller)::-webkit-scrollbar {
  display: block;
}