javascript - 调整CSS大小规则改变其他div

Question

我有几个 div，所有这些 div 上都带有 css 规则“re​​size:both”。问题是，当我开始调整其中任何一个的大小时，其他的会自动移动。可以改变这种行为吗？

尝试过“position:absolute”，但这不是一个解决方案，因为它将所有 div 收集在一个地方。它们也可以像笔记一样被拖动，所以我不能把它们粘在 Angular 落里。

可调整大小的 div 应该比其他 div 改变其大小(具有更高的 z-index 或像这样的东西)。其他人应该在调整大小时和之后保持在原来的位置

代码: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>

pic

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>