大家好，我正在尝试构建一个蚀刻草图，但在让我的 div 留在其容器内时遇到了问题。如果我要添加更多 div，我还希望容器能够拉伸。我的 div 是通过函数制作的。
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<script text='text/javascript' src="Etch.js" defer></script>
<title>Etch-a-Sketch</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid red;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#container {
width: 700px;
height: 700px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.squares {
height: 40px;
width: 40px;
padding: 10px;
flex-grow:1;
}
问题在于您显式添加了高度，这会阻止容器增长。要解决此问题，请使用以下代码更新容器 CSS -
#container {
width: 700px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}