I am new to web-development with html, pure css and vanilla js knowledge. I have been trying to build a webpage gallery using 3D navbar but when flex-wrap is used, the flex-items i.e. the images go outside the wrapper on opening the 3D menu. I can do without flex-wrap here but that doesn't seem to look very good here and I want to learn about the issue here too. Mind that, only the flex-items overflow the wrapper and not the flex-box. I'm sharing the webpage link for easier understanding. Open the menu on the webpage to see the issue I am talking about.
Link: https://sparksfest.netlify.app/gallery/
HTML used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sparks '21 || Ensnaring the flow of Time</title>
<link rel="stylesheet" href="style.css">
<link rel = "icon" href ="../images/logo.png" type = "image/x-icon">
</head>
<body>
<div id="loaderSvgWrapper">
<svg viewbox="0 0 100 100" id="preLoader" width="100px" height="100px">
<path style="stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter" d="m 58.26475,43.628481 15.7247,-27.287018 -31.4936,0.02553 z" id="T1"/>
<path style="stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter" d="m 58.26475,43.628481 31.4936,-0.02553 -15.7689,-27.261492 z" id="T2"/>
<path style="stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter" d="M 58.26475,43.628481 74.03365,70.88997 89.75835,43.602954 Z" id="T3"/>
<path style="stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter" d="M 58.26475,43.628481 42.54006,70.915503 74.03365,70.889973 Z" id="T4"/>
<path style="stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter" d="m 58.26475,43.628481 -31.49359,0.02553 15.7689,27.261491 z" id="T5"/>
<path style="stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter" d="M 58.26475,43.628481 42.49585,16.366995 26.77116,43.654011 Z" id="T6"/>
</svg>
<br>
<div>Loading...</div>
</div>
<div class="modal">
<div class="cross">
<div class="bar"></div>
</div>
<img class="modal-image" id="1" src="../images/gallery/1.jpg">
<img class="modal-image" id="2" src="../images/gallery/2.jpg">
<img class="modal-image" id="3" src="../images/gallery/3.jpg">
<img class="modal-image" id="4" src="../images/gallery/4.jpg">
<img class="modal-image" id="5" src="../images/gallery/5.jpg">
<img class="modal-image" id="6" src="../images/gallery/6.jpg">
<img class="modal-image" id="7" src="../images/gallery/7.jpg">
<img class="modal-image" id="8" src="../images/gallery/8.jpg">
<img class="modal-image" id="9" src="../images/gallery/9.jpg">
</div>
<header class=".header">
<a href="../index.html"><div class="logo">Sparks <span>'21</span></div></a>
<div class="menu">
<div class="bar"></div>
</div>
</header>
<div class="wrapper">
<div id="particles-js">
<main>
<div class="heading">Gallery</div>
<div class="gallery">
<img class="image" id="1" src="../images/gallery/1.jpg">
<img class="image" id="2" src="../images/gallery/2.jpg">
<img class="image" id="3" src="../images/gallery/3.jpg">
<img class="image" id="4" src="../images/gallery/4.jpg">
<img class="image" id="5" src="../images/gallery/5.jpg">
<img class="image" id="6" src="../images/gallery/6.jpg">
<img class="image" id="7" src="../images/gallery/7.jpg">
<img class="image" id="8" src="../images/gallery/8.jpg">
<img class="image" id="9" src="../images/gallery/9.jpg">
</div>
</main>
<a href="#top">
<div class="scrollTop">
<div class="arrow"></div>
</div>
</a>
<div class="showFooter" onclick="window.scrollTo(0,document.body.scrollHeight);">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>
</div>
</div>
<div class="shadow one"></div>
<div class="shadow two"></div>
<footer>
<div class="media">
Follow Us: 
<a href="http://facebook.com/" target="_blank"><img src="../images/icons/facebook.png"></a>
<a href="http://instagram.com/" target="_blank"><img src="../images/icons/instagram.png"></a>
<a href="http://youtube.com/" target="_blank"><img src="../images/icons/youtube.png"></a>
</div>
<div class="credit">Made by:  <span>Mrinal Devnath</span></div>
</footer>
<div class='container'>
<nav>
<ul>
<li><a href='../index.html' class='navButtons' style="--i: 0.05s;">Home</a></li>
<li><a href='../about/index.html' class='navButtons' style="--i: 0.1s;">About</a></li>
<li><a href='../events/index.html' class='navButtons' style="--i: 0.15s;">Events</a></li>
<li><a href='#' class='navButtons present' style="--i: 0.2s;">Gallery</a></li>
<li><a href='#' class='navButtons' style="--i: 0.25s;">Sponsors</a></li>
<li><a href='#' class='navButtons' style="--i: 0.3s;">Schedule</a></li>
<li><a href='#' class='navButtons' style="--i: 0.35s;">Contact Us</a></li>
<li><a href='#' class='navButtons' style="--i: 0.4s;">Login</a></li>
</ul>
</nav>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="../particles.js"></script>
<script type="text/javascript" src="../app.js"></script>
</html>
Parts of the CSS used:
.wrapper
{
position:relative;
min-height:100vh;
width:100%;
height:100%;
background:url(../images/bg.jpg) center/cover;
background-repeat:no-repeat;
transform-origin:left;
transition:all var(--time);
display:flex;
justify-content:center;
align-items:center;
flex-flow:column;
perspective:1000px;
transform-style:preserve-3d;
z-index: 3;
}
.wrapper.active
{
animation:wrapper-animation .5s ease;
cursor:pointer;
transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(.5)
}
@keyframes wrapper-animation
{
from {
transform:translate(0)
}
to {
transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(.5)
}
}
.crop
{
height:100%;
max-height:100vh;
overflow:hidden
}
/* Wrapper Ends Here */
main
{
margin-top:80px
}
.heading
{
font:max(3.5rem,5vw) Corbel;
letter-spacing:1px;
text-transform:uppercase;
text-align:center
}
/* Gallery */
.gallery
{
display: flex;
justify-content: space-evenly;
align-items: center;
width: 80vw;
height: auto;
flex-wrap: wrap;
padding: 30px;
padding-top: 50px;
padding-bottom: 50px;
margin-top: 50px;
margin-bottom: 100px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.4);
border-top: 3px solid rgba(255,255,255,0.4);
border-left: 4px solid rgba(255,255,255,0.4);
border-radius: 15px;
}
.image
{
width: 300px;
height: 200px;
margin: 10px;
overflow: hidden;
border-radius: 7px;
display: flex;
justify-content: center;
align-items: center;
}
.image:hover
{
box-shadow: 0px 0px 10px 3px rgba(255,255,255,0.4);
}
Thanks for all you help in advance and pardon me for the silly mistakes that you may see in the code. Shown in the image above is the problem that I am facing.
NOTE: This issue first arose in Mozilla Firefox version 90.0.2 but worked well in Chrome.