英文:
How can I create a flex container that allows vertical scrolling without specifying its height?
问题
在下面的代码片段中，我期望第一个和第二个容器各占窗口高度的50%，并且我希望第一个容器的主体具有垂直溢出。
不幸的是，当我在第一个容器中放入大块内容时，它会变得大于页面的50%，自动溢出不起作用。
是否有办法使其在不指定高度的情况下实现？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
希望这有所帮助。
英文:
In the snippet below I am expecting the first and the second container to occupy 50% of the window height each, and I want first container body to have vertical overflow.
Unfortunately, when I am putting huge block inside the first container - it is becoming bigger then 50% of the page and auto overflow does not work.
Is there any way to make it possible without specifying the height?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
你必须将块内容包裹在一个设置为滚动的div内，以便标记整个块内容可滚动，否则只有它的中间部分会滚动。
并且将 overflow-y: auto; 添加到块本身以将其设置为滚动。
试试这样做：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
希望这有帮助。
英文:
You must wrap the block content inside a div with overflow-y set to scroll in order to mark the whole block content scroll, else only it's middle part will scroll.
and add overflow-y: auto; to the block itself to set it as scroll.
Try This:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论