Quiero que el cuadro item1 permanezca dentro de su columna principal cuando cambie el tamaño de su altura. Ahora, cuando trato de cambiar su tamaño, su hermano item2 desborda inmediatamente a su padre y en un momento col2 se reduce. Lo que quiero es que cuando cambie el tamaño del elemento 1, el elemento 2 se vuelva más pequeño y cuando la altura del elemento 1 sea igual a la altura de la columna, el usuario ya no podrá cambiar su tamaño. ¿Es factible solo con CSS? ¿Es fácil hacerlo sin el método de tamaño variable de jquery UI?
<!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>Aquí hay un ejemplo usando 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>