我正在努力使代码中所描述的溢出Y代码起作用。我有一个元素只会占用与其内容一样多的垂直空间,并且在溢出时具有父滚动。完整的代码可以在这里查看:https://jsfiddle.net/bmts8L5x/3/。我只需要在这里包含一部分代码即可满足此处的短绒棉的代码与非代码比率。
header {
background: yellow;
}
#first {
overflow: hidden;
}
container {
display: flex;
height: 100vh;
overflow: hidden;
}
#side {
display: flex;
flex-direction: column;
width: 200px;
overflow: scroll;
}
#side>div {
height: 200px;
}
html,
body {
margin: 0;
padding: 0;
}
main>div:first-child {
background: white;
height: 50px;
}
#big {
background: pink;
border: solid;
overflow: scroll;
display: flex;
flex: 1;
}
#big>div {
width: 1000px;
height: 100px;
/* I'd like to see #big take up the remaining space regardless of whether height here is 100px or 10000px */
}
<container>
<div id="side">
<div>
side nav does not scroll
</div>
<div>
item
</div>
<div>
item
</div>
<div>
item
</div>
<div>
item
</div>
<div>
item
</div>
</div>
<div id="first">
<header>
foo
</header>
<main>
<div>
this should remain visible after scrolling without needing position fixed
</div>
<header>
some other stuff
</header>
<div id="big">
<div>
this should take up the rest of the remaining viewable space and have any overflow be scrolled through.
<br /> X scrolls as expected but Y's overflow isn't contained to rest of viewable space.
</div>
</div>
</main>
</div>
</container>
答案 0 :(得分:2)
您甚至可以嵌套您的flexbox-将您的#first
和main
设为列 flexbox
并赋予{{1 }}:
height: 100%
请参见下面的演示
#first, main {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: yellow;
}
#first {
overflow: hidden;
}
container {
display: flex;
height: 100vh;
overflow: hidden;
}
#side {
display: flex;
flex-direction: column;
width: 200px;
overflow: scroll;
}
#side>div {
height: 200px;
}
html,
body {
margin: 0;
padding: 0;
}
main>div:first-child {
background: white;
height: 50px;
}
#big {
background: pink;
border: solid;
overflow: scroll;
display: flex;
flex: 1;
}
#big>div {
width: 1000px;
height: 100px;
}
/* ADDED */
#first, main {
display: flex;
flex-direction: column;
height: 100%;
}