Dalam coretan kod di bawah, saya menjangkakan bekas pertama dan kedua masing-masing menempati 50% ketinggian tingkap, dan saya mahu badan kontena pertama mempunyai menegak melimpah.
Malangnya apabila saya meletakkan bongkah besar ke dalam bekas pertama - ia menjadi lebih besar daripada 50% halaman dan limpahan automatik tidak berfungsi.
Adakah ada cara untuk tidak nyatakan ketinggian?
* {
margin: 0;
box-sizing: border-box;
}
.root {
height: 100vh;
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.first-block,
.second-block {
flex: 1;
background-color: aqua;
border: 1px solid gray;
display: flex;
flex-direction: column;
}
.first-block-header {
height: 100px;
background-color: yellow;
}
.first-block-footer {
height: 100px;
background-color: coral;
}
.first-block-body {
flex: 1;
overflow: auto;
padding: 16px;
}
.first-block-content {
height: 700px;
width: 50px;
background-color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problem with overflow</title>
</head>
<body>
<div class="root">
<div class="first-block">
<div class="first-block-header"></div>
<div class="first-block-body">
<div class="first-block-content"></div>
</div>
<div class="first-block-footer"></div>
</div>
<div class="second-block">
</div>
</div>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda perlu membungkus kandungan blok dalam div dan tetapkan limpahan-y untuk menatal supaya keseluruhan kandungan blok ditandakan untuk menatal, jika tidak hanya bahagian tengah yang akan menatal.
dan tambah
overflow-y: auto;pada blok itu sendiri untuk menetapkannya untuk menatal.Cuba ini:
* { margin: 0; box-sizing: border-box; } .root { height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 16px; } .block-content-wrapper { overflow-y: scroll; } .first-block, .second-block { flex: 1; background-color: aqua; border: 1px solid gray; display: flex; flex-direction: column; overflow-y: auto; } .first-block-header { height: 100px; background-color: yellow; } .first-block-footer { height: 100px; background-color: coral; } .first-block-body { flex: 1; overflow: auto; padding: 16px; } .first-block-content { height: 700px; width: 50px; background-color: purple; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Problem with overflow</title> </head> <body> <div class="root"> <div class="first-block"> <div class="block-contant-wrapper"> <div class="first-block-header"></div> <div class="first-block-body"> <div class="first-block-content"></div> </div> <div class="first-block-footer"></div> </div> </div> <div class="second-block"> </div> </div> </body> </html>