我有類似以下內(nèi)容：#page { height: 200px; /* just for illustration, would be 100vh */ border: 1px solid black; /* just for illustration */ display: flex; flex-direction: column;}#nav { height: 30px; background-color: lightBlue; flex: none;}#content { background-color: lightGreen; display: flex; flex: 1 1 auto;}section { flex: 1 1 50%; padding: 5px; margin: 5px; border: 1px solid black;}.problem { color: white; background-color: red; height: 500px; overflow-y: auto;}<div id="page"> <div id="nav"> I'm a nav bar! </div> <div id="content"> <section> Stuff </section> <section> More stuff <div class="problem"> Oh no I'm huge and should scroll vertically </div> </section> </div></div>我希望頁面永遠(yuǎn)不會(huì)滾動(dòng)，并且我只希望大的紅色矩形在<section>. 我需要添加哪些規(guī)則才能使紅色矩形了解其父級(jí)的邊界？
2 回答
富國滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以將您的部分設(shè)為 Flexbox 容器，然后設(shè)置Flex CSS 屬性 （flex-grow、flex-shrink和flex-basis 的縮寫）
您希望它展開或收縮以占據(jù)所有剩余高度 =>flex-grow: 1;和flex-shrink: 1;
flex-basis 的解釋（來自這個(gè)答案）：
彈性基礎(chǔ)系數(shù)
當(dāng) flex-basis 為 0 時(shí)，flex-grow 會(huì)忽略 Flex 項(xiàng)目中內(nèi)容的大小，并將該行上的所有空間視為可用空間。
這是絕對(duì)尺寸。線路上的所有空間均已分配。
這就是我們這里需要的=>flex-basis: 0;
代碼如下：
section {
flex: 1 1 50%;
padding: 5px;
margin: 5px;
border: 1px solid black;
display: flex; /* added */
flex-direction:column; /* added */
}
.problem {
color: white;
background-color: red;
overflow-y: auto;
flex: 1 1 0; /* added */
}
#page {
height: 100vh; /* just for illustration, would be 100vh */
border: 1px solid black; /* just for illustration */
display: flex;
flex-direction: column;
}
#nav {
height: 30px;
background-color: lightBlue;
flex: none;
}
#content {
background-color: lightGreen;
display: flex;
flex: 1 1 auto;
}
section {
flex: 1 1 50%;
padding: 5px;
margin: 5px;
border: 1px solid black;
display: flex;
flex-direction:column;
}
.problem {
color: white;
background-color: red;
overflow-y: auto;
flex: 1 1 0;
}
<div id="page">
<div id="nav">
I'm a nav bar!
</div>
<div id="content">
<section>
Stuff
</section>
<section>
More stuff
<div class="problem">
Oh no I'm huge and should scroll vertically
</div>
</section>
</div>
</div>
如果您在 中添加更多內(nèi)容div.problem，它將具有預(yù)期的行為
#page {
height: 100vh; /* just for illustration, would be 100vh */
border: 1px solid black; /* just for illustration */
display: flex;
flex-direction: column;
}
#nav {
height: 30px;
background-color: lightBlue;
flex: none;
}
#content {
background-color: lightGreen;
display: flex;
flex: 1 1 auto;
}
section {
flex: 1 1 50%;
padding: 5px;
margin: 5px;
border: 1px solid black;
display: flex;
flex-direction:column;
}
.problem {
color: white;
background-color: red;
overflow-y: auto;
flex: 1 1 0;
}
<div id="page">
<div id="nav">
I'm a nav bar!
</div>
<div id="content">
<section>
Stuff
</section>
<section>
More stuff
<div class="problem">
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
Oh no I'm huge and should scroll vertically
</div>
</section>
</div>
</div>
阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
#page {
height: 200px; /* just for illustration, would be 100vh */
border: 1px solid black; /* just for illustration */
display: flex;
flex-direction: column;
}
#nav {
height: 30px;
background-color: lightBlue;
flex: 0 0 auto;
}
#content {
background-color: lightGreen;
display: flex;
overflow: hidden;
}
section {
flex: 1 1 50%;
padding: 5px;
margin: 5px;
border: 1px solid black;
overflow-y: auto;
}
.problem {
color: white;
background-color: red;
height: 500px;
}
- 2 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報(bào)
0/150
提交
取消