UPDATE I followed the suggestion in Ezra Siton's answer and changed the media query display to block, which successfully resolved the issue!
Within my html code, I have a parent column flexbox containing two children. The second child is itself another flexbox with four divs.
I have placed a canvas in each div with the intention of displaying some charts within them. The child flexbox is displayed as a 2x2 grid on larger screens, but on smaller screens such as tablets or smartphones, the flexbox decoration should change to no-wrap column:
.inst-data {
padding: 20px;
position: fixed;
width: 90%;
height: 90vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 1);
border-radius: 15px;
border: 2px dotted orangered;
z-index: 100;
}
.grid-container {
display: flex;
align-content: center;
justify-content: center;
width: 100%;
height: 80vh;
flex-wrap: wrap;
}
.grid-item {
border-radius: 15px;
margin: 10px;
width: 45%;
height: 45%;
background-color: orchid;
}
@media (max-width: 800px) {
.grid-container {
overflow-y: auto;
flex-direction: column;
flex-wrap: nowrap;
justify-items: center;
align-items: center;
}
.grid-item {
width: 90%;
}
}<div class="inst-data shadow">
<div class="d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2>
<div class="grid-container" id="ch-div">
<canvas id="buy-chart" width="200" height="200" class="grid-item"></canvas>
<canvas id="net-chart" width="200" height="200" class="grid-item"></canvas>
<canvas id="stock-chart" width="200" height="200" class="grid-item"></canvas>
<canvas id="price-chart" width="200" height="200" class="grid-item"></canvas>
</div>
</div>
</div>During testing of the media query, the top canvas disappeared and became unreachable even with the scrollbar. What steps should I take to resolve this issue?