如何保持设置为可调整大小的网格项不超出div

Question

不知道我是不是很笨，但我正在尝试使用2x2网格的可调整大小的项目。我可以让它们都工作，但在尝试为项目设置最大宽度时，它不会离开屏幕，但如果你一直拖动它，它会忽略网格的最大大小。它保持在我设置的最大尺寸几秒钟，但如果我不释放鼠标，它最终会超出最大尺寸。我的CSS如下，有问题的项目是第2项。

.grid-container {
margin: 0px;
display: grid;
grid-template-columns: fit-content(90%) fit-content(90%) 1fr;
grid-template-rows: fit-content(8ch) fit-content(8ch) 1fr;
grid-gap: 10px;
background-color: #439cea;
padding: 10px;
width: 99%;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 1 / 1 / span 1 / span 2;
min-width: 500px;
min-height: 400px;
}
.item2 {
box-sizing: border-box;
grid-area: 1 / 3 / span 1 / span 2;
max-height: fit-content;
overflow: auto;
height: 80px;
width: 100%;
max-width: 90%;
min-width: 50px;
overflow: auto;
resize: both;
}
.item3 {
grid-area: 2 / 1 / span 1 / span 2;
}
.item4 {
grid-area: 2 / 3 / span 1 / span 2;
max-width: 100%;
resize: both;
}

<div class="grid-container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>

Answer 1

如果不想限制.resizable元素的大小，而只想限制父元素，那么只需在父元素上使用overflow: hidden;和max-width就可以防止它看起来超出限制。如果你想限制孩子的生长，我这样做的方法是在根上使用css变量和calc来确定孩子的大小。我还使用了方框大小来考虑滚动条的高度/宽度；

* {
box-sizing: border-box;
}
:root {
--container-max-width: 200px;
--resizable-max-width: calc(var(--container-max-width) / 2);
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: var(--container-max-width);
overflow: hidden;
}
.resizable {
max-width: var(--resizable-max-width);
border: 1px solid black;
resize: both;
overflow: scroll;
}

<div class="container">
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
</div>