我认为我遇到了 flex 的一个小问题。我正在尝试获得一个简单的布局(如链接的 jsfiddle 中所示)。但是,当右侧的 div(红色)超出其高度时,该元素会在视口(viewport)中溢出,并且只有当它超出视口(viewport)的高度时才可滚动。
我很确定这是因为我在很多元素中使用了 height: 100%;
,但我需要它们尽可能大(以填充视口(viewport)高度完全)。
我想要的是由这三个部分完全填充的视口(viewport):导航、左侧栏和右侧内容(参见下图)。正确的内容部分在溢出视口(viewport)时应该可以滚动。
因此,得出一个结论。这里的问题是可滚动内容首先溢出视口(viewport),当 div(看起来像)与视口(viewport)高度相同时,它开始可滚动。我显然希望 div 在溢出视口(viewport)时可以滚动。
我将如何实现这一目标?感谢您的宝贵时间。
代码(在 JSFiddle 中也可用)
HTML
<div id="content-container">
<div id="content">
<div id="left">
IM LEFT
</div>
<div id="right">
<div id="inner">
IM RIGHT
</div>
IM RIGHT
</div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#main {
height: 100%;
background: black;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100vw;
height: 100vh;
}
#main nav {
background: orange;
width: 100%;
height: 96px;
}
#main #content-container {
background: darkgreen;
color: white;
width: 100%;
flex-grow: 1;
max-height: 100%;
}
#main #content-container #content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
max-height: 100%;
}
#main #content-container #content #left {
background: darkblue;
width: 30%;
height: 100%;
}
#main #content-container #content #right {
background: darkred;
height: 100%;
flex-grow: 1;
overflow-y: scroll;
}
#main #content-container #content #right #inner {
font-size: 25rem;
}
最佳答案
您可以像下面这样简化您的代码:
body {
margin: 0;
}
#main {
height: 100vh; /*full height*/
background: black;
display: flex;
flex-direction: column;
}
#main nav {
background: orange;
height: 96px; /*fixed height*/
}
#content-container {
background: darkgreen;
color: white;
flex-grow: 1; /*fill the remaining height*/
min-height:0; /*enable the shrink*/
}
#content {
display: flex;
flex-direction: row;
height: 100%;
}
#left {
background: darkblue;
width: 30%;
}
#right {
background: darkred;
overflow:auto;
}
/*Irrelevant*/
#inner {
font-size: 25rem;
}
<div id="main">
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/games">Games</a>
</li>
<li>
<a href="/create">Create</a>
</li>
</ul>
</nav>
<div id="content-container">
<div id="content">
<div id="left">
IM LEFT
</div>
<div id="right">
<div id="inner">
IM RIGHT
</div>
IM RIGHT
</div>
</div>
</div>
</div>
关于html - Flex grow 1 不允许正确滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55752577/