resize CSS规则改变其他div

Question

我有几个div的css规则'resize: both'。问题是，当我开始调整它们的大小时，其他的会自动移动。有可能改变这种行为吗?

尝试'position: absolute'，但它不是一个解决方案，因为它收集了所有div在一个地方。它们也可以像注释一样拖拽，所以我不能把它们粘在角落里。

可调整大小的div应该改变其大小(使用更高的z-index或像这样的smith)。在

后调整大小时，其他人应保持在其位置。代码:https://jsfiddle.net/q3m5ya8f/

.el {
resize: both;
overflow-y: auto;
border: 2px solid black;
margin: 10px;
height: 100px;
width: 100px;
}
.container {
display: flex;
flex-direction: row;
}

<div class="container">
<div class="el">
1
</div>
<div class="el">
2
</div>
</div>

<div class="el">
3
</div>

图片

Answer 1

尝试使用如下的网格:

.el {
resize: both;
overflow-y: auto;
border: 2px solid black;
}
.container {
display: grid;
/* the width / height here */
grid-template-columns:100px 100px;
grid-auto-rows:100px;
gap: 10px;
}

<div class="container">
<div class="el">
1
</div>
<div class="el">
2
</div>
<div class="el">
3
</div>
</div>

Answer 2

你可以通过position:absolute和left/right/top/bottom属性分别定位div来实现这一点，就像下面的代码片段所做的那样(位置可以是你想要的，我已经采取了例子):

.el {
resize: both;
overflow-y: auto;
border: 2px solid black;
margin: 10px;
height: 100px;
width: 100px;
position: absolute
}
.el1 {
left: 0
}
.el2 {
right: 0
}
.el3 {
bottom: 0
}
.container {
display: flex;
flex-direction: row;
}

<div class="container">
<div class="el el1">
1
</div>
<div class="el el2">
2
</div>
</div>

<div class="el el3">
3
</div>

Answer 3

您可以添加一个wrapper-div，并给它固定的width和height:

.el{
resize: both;
overflow-y: auto;
border: 2px solid black;
margin: 10px;
height: 100px;
width: 100px;
}
.container{
display: flex;
flex-direction: row;
}
.wrapper-div{
margin: 10px;
width:100px;
height:100px;
}

<div class="container">
<div class="wrapper-div">
<div class="el">
1
</div>
</div>
<div class="wrapper-div">
<div class="el">
2
</div>
</div>
</div>
<div class="wrapper-div">
<div class="el">
3
</div>
</div>