I am currently developing an Angular application. One of my components contains the following template HTML:
<div class="panel panel-primary">
<div class="panel-heading">Info</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a>Data</a></li>
</ul>
<br>
<div class="dataModel">
<!--This div is creating a horizontal scrollbar -->
</div>
</div>
</div>
The css associated with the dataModel class is as follows:
.dataModel{
height:400px;
overflow-y:scroll;
overflow-x: hidden;
}
Interestingly, when the height of this div is set to less than 50px, there is no horizontal scrollbar. However, a height of 50px or more triggers a horizontal scrollbar to appear, despite not modifying the width.
I considered setting the height to auto, but that would conflict with the overflow-y property.
My suspicion is that the bootstrap classes are maintaining a specific aspect ratio on the div, leading to the unexpected width change when adjusting the height. Can anyone confirm?
Your input is greatly appreciated. Thank you.