I have several divs with css rule 'resize: both' on all of them. The problem is that when I start to resize any of them others move automatically. Is is possible to change that behaviour?
Tried 'position: absolute' but it isn't a solution, cause it collects all divs in one place. They are also will be draggable like notes, so I can't stick them to corners.
The resizable div should change its size over the others (with higher z-index or smth like this). Others should stay at their positions while resizing and after
code: 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>Try using grid like below:
.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>Well you can achieve this by position:absolute and position each of div using left/right/top/bottom properties separately like done in bellow snippet ( position can be your desired one I have taken for example ) :
.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>You can add one wrapper-div and give it fixed width and 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>