I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling properly due to using the grid 1fr property. The problem can be resolved by using height: 100%.
Here is the link to the solution on CodePen
html, body {
height: calc(100% - 20px);
display: grid;
grid-template-row: 1fr 1fr;
}
.mainContainer{
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
}
.container{
display: grid;
grid-template-rows: 1fr;
grid-auto-flow: column;
width: 500px;
overflow-x: auto;
overflow-y: scroll;
}
.box{
width: 120px;
}<div class="mainContainer">
<h3>Without horizontal scroll - no vertical scroll bar</h3>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
<div class="mainContainer">
<h3>With horizontal scroll- vertical scroll is comming</h3>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>If you remove div-4 and div-5, the vertical scrollbar will not appear. I am unsure about how to resolve this issue.