I want the item1 box to stay inside its parent column when I resize its height. Now when I try to resize it, its item2 sibling immediately overflows its parent and at one moment col2 shrinks. What I want is that when I resize item1, item2 become smaller and when item1 height is equal to the height of the column user won't be able to resize it anymore. Is it doable with just CSS? Is it easy to do without jquery UI resizable method?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table {
width: 100%;
height: 800px;
display: table;
background: red;
z-index: 0;
position: relative;
}
.row {
width: 100%;
height: 100%;
display: table-row;
background: yellow;
z-index: 0;
position: relative;
}
.col1 {
float: left;
width: 360px;
height: 100%;
display: table-column;
background: black;
/* overflow: auto; */
z-index: 0;
position: relative;
}
.col2 {
float: left;
width: calc(100% - 360px);
height: 100%;
display: table-column;
background: gray;
z-index: 0;
position: relative;
}
.item1 {
/*float: left;*/
width: 100%;
height: 33%;
display: block;
/*display: table-row;*/
background-color: green;
overflow-y: auto;
z-index: 1;
position: relative;
resize: vertical;
}
.item2 {
/*float: left;*/
width: 100%;
height: 67%;
display: block;
/*display: table-row;*/
background: blue;
overflow-y: hidden;
font-size: 12px;
font-weight: 700;
z-index: 0;
position: relative;
}
.item3 {
float: left;
width: calc(100% - 360px);
height: 100%;
display: table-column;
background: gray;
z-index: 0;
position: relative;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="col1">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
<div class="col2">
<div class="item3">item3</div>
</div>
</div>
</div>
</body>
</html>Here is an example using flex:
.container {
background: red;
overflow: hidden;
height: 200px;
}
.row {
display: flex;
flex-flow: row wrap;
height:100%;
background: yellow;
}
.col {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 2;
}
.item1 {
background-color: green;
display: block;
overflow-y: auto;
position: relative;
resize: vertical;
max-height: 150px;
}
.item2 {
background: blue;
flex: 1;
}
.item3 {
background: gray;
flex: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
<div class="col">
<div class="item3">item3</div>
</div>
</div>
</div>
</body>
</html>