I've been trying to code etch-a-sketch like page but I can't make the container's size to be fixed while making the grid boxes insided shrink so they all fit.It works well when there is 16 x 16 grid boxes generated but mor example 30 x 30 will make the container overflow to the right way too much.I want the container to stay in place and don't change at all
* { margin: 0; padding: 0; box-sizing: border-box;}body { height: 100vh; background: rgb(12, 109, 109); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5%;}#container { display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap; flex-grow: 0; align-items: center; max-height: 500px; background-color: rgb(110, 104, 104);}.grid { height: 30px; width: 30px; flex-shrink: 1; display: inline-block; background: white; /*border: 1px solid black;*/}.hovered { background-color: rgb(238, 220, 220); opacity: 1;}.buttons { display: flex; justify-content: center; align-items: center;}#create { font-family: system-ui, sans-serif; font-size: 3.5rem; cursor: pointer; padding: .1em .6em; font-weight: bold; border: none;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"><script defer src="script.js"></script></head><body><!-- <button onclick="generateGrid(16,16)">Generate</button> --><div class="buttons"><button id="create">Create new grid</button></div><div id="container"></div></body></html>I've been trying to change flex properties but it didn't help