内部div溢出外部div

Question

我正试图在一个正方形中创建一个响应3x3 grid。当我调整页面大小时，网格当前从外部div溢出。如何使网格适合正方形，并在与外部div成比例的范围内调整大小？非常感谢。

这是一个jsfiddle：https://jsfiddle.net/alexb12/prs5z9cL/

我的代码：

.wrapper{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 27vw;
height: 27vw;
background-color: #d8c7ff;
border-radius: 10px;
border: 4px;
border-style: solid;
border-color: purple;
padding:1em;
}
.box{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5%;
column-gap: 5%;
}
.box > div{
border: #333 1px solid;
padding: 1em;
background: red;
width: 6vw;
height: 6vw;
max-width: 100%;
}

<div class="wrapper">
<div class="box">
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
</div>
</div>

Answer 1

更新如下代码：

.wrapper {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50vmin;
height: 50vmin;
background-color: #d8c7ff;
border-radius: 10px;
border: 4px solid purple;
padding: 1em;
}
.box {
display: grid;
height:100%;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5%;
}
.box>div {
border: #333 1px solid;
background: red;
display:flex;
justify-content:center;
align-items:center
}

<div class="wrapper">
<div class="box">
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
</div>
</div>

Answer 2

您只需给定框大小的属性：带有通用选择器的边界框，您的问题就会得到解决。

*{
box-sizing:border-box;
}

Answer 3

开始：https://codepen.io/obliviga/pen/KKMoaBd?editors=1100

我修改了你的CSS：

.wrapper {
width: 27vw;
height: 27vw;
background: tomato;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 5%;
row-gap: 5%;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.box {
background-color: gray;
}

如果您对实施有任何疑问，请告诉我。

Answer 4

只需从选择器.box > div中删除宽度和高度，问题就会得到解决。你的css应该像这个

.box > div{
border: #333 1px solid;
padding: 1em;
background: red;
max-width: 100%;
}