我有一个非常简单的布局:
+---------------+
| Header |
+---------------+
| | |
| | |
| Item1 | Item2 |
| | |
| | |
+---------------+
应该是页面高度的100%，Item2应该是垂直可滚动的(item1有固定的大小，不影响高度)。
我正在尝试使用flexx。根容器是伸缩列，其中包含头和子伸缩容器。子容器包含Item1和Item2，并且有flex: 1强制项增长到页面底部。
问题是，当向Item2添加内容时，它的父容器开始在高度上增长并超过根容器高度!所以滚动条出现在页面上，但我只需要Item2应该是可滚动的。
是否有任何方法来防止这种情况，只使用flex功能，不涉及height,max-height?如果不可能，在这种情况下，正确的高度设置是什么?
<div style="display: flex; flex-direction:column; height: 100vh;">
<div>Hello Flex!</div>
<div style="flex: 1; display: flex">
<div style="flex: 1">
1
</div>
<div style="flex: 1; overflow: auto">
2<br>2<br>2<br>very long content, should be scrollable and NOT stretch parent.
</div>
</div>
</div>使用flexbox来解决这个问题您需要包装您想要滚动的盒子并将overflow-x: hidden;添加到包装容器中。要修复一些额外的空间，请使用calc()方法。当在可滚动元素上使用height: 100vh;时，就会发生这种情况。
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--header-height: 60px;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f1f1f1;
}
header {
min-height: var(--header-height);
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
}
.box1,
.box2 {
display: flex;
flex: 1 0 50%;
border: 1px solid red;
}
.box2 {
height: calc(100vh - var(--header-height));
background-color: antiquewhite;
overflow-x: hidden;
}
.scrollable {
width: 100%;
display: flex;
overflow-y: auto;
}<div class="container">
<header>Hello Flex!</header>
<main>
<div class="box1">1</div>
<div class="box2">
<div class="scrollable">
2<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> very long content, should be scrollable and NOT stretch parent.
</div>
</div>
</main>
</div>这是使用CSS网格布局和flexbox的一种可能性。标题的高度设置为200px，但它可以是任何单位或相对单位。
<!DOCTYPE html>
<html>
<head>
<title>layout</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#grid {
display: grid;
background: rgba(255, 255, 255, 0.5);
grid-template-rows: 200px calc(100vh - 200px);
}
#header {
background: blue;
}
#cols {
display: grid;
grid-template-columns: 1fr 1fr;
background: green;
}
#colA {
background: yellow;
}
#colB {
display: flex;
flex-direction: column;
overflow-y: auto;
background: orange;
}
#content {
padding: 1200px 20px;
}
</style>
</head>
<body>
<div id="grid">
<div id="header"></div>
<div id="cols">
<div id="colA"></div>
<div id="colB">
<div id="content">
colB content
</div>
</div>
</div>
</div>
</body>
</html>
参见codepen。