我昨天問了一個關于為我的場景設定 flex 布局的問題，使用 flex 使內部 div 填充剩余高度，它在我的大型專案中運行良好。我現在遇到了一個問題，即 flex div 中的專案延伸到頁面之外，而另一個容器延伸得更遠。理想情況下，我希望將專案保留在容器內，并且容器內部有一個滾動條，因此頁面的主要部分不必滾動 - 只有容器的內部。任何想法為什么這不能自動作業？我試過移動一些 flex 和其他各種屬性，但沒有運氣。
HTML/CSS：
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home-content {
display: flex;
border: 1px solid black;
height:100vh;
flex-flow: column;
}
.container {
flex: 1;
border: 1px solid red;
display: flex;
flex-direction: column;
}
#listItems {
border: 1px solid green;
height: 100%;
}
#listItems > ul {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
border: 1px solid purple;
width: 200px;
height: 200px;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>編輯：從技術上講，我不希望在頁面的主要部分滾動，但希望帶有綠色邊框的 div 不超過頁面，并且其中的專案不超過其邊界以及當有很多時對于超過其高度的專案，我可以在listItems具有綠色邊框的那個 div 內滾動。有點像如果那個listItemsdiv 只是一個照片庫并且可以在其中滾動以查看所有影像
uj5u.com熱心網友回復：
在這里試試這個：
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home-section {
display: flex;
border: 3px solid black;
height:100vh;
flex-flow: column;
max-height: 99vh;
}
.container {
flex: 1;
border: 3px solid red;
display: flex;
flex-direction: column;
height: fit-content;
max-height: 99vh;
overflow: auto;
}
#listItems {
border: 3px solid green;
height: 99vh;
overflow-y: auto;
}
#listItems > ul {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
border: 3px solid purple;
width: 200px;
height: 200px;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>我在容器不大于螢屏高度的地方添加了一個max-height. 您可以通過在容器外添加更多代碼來測驗它，它會添加另一個滾動條。同樣要更改最大高度，請轉到容器并更改它的最大高度，它將更改高度。我使邊框更粗一些，以便更容易地將其可視化。
uj5u.com熱心網友回復：
添加溢位：滾動；到您不想溢位的容器。
uj5u.com熱心網友回復：
您可以使用
flex-wrap: 包裹; 這將使一切都保持在螢屏尺寸的限制之下
uj5u.com熱心網友回復：
添加overflow: scroll;到 home-content div
uj5u.com熱心網友回復：
添加溢位流：滾動；到 .home-content/container 并將 .home-content 的高度從 100vh 更改為像素或百分比值。運行代碼片段
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home-content {
margin:0 auto;
width: 70%;
padding: 50px;
display: flex;
border: 1px solid black;
height:250px;
flex-flow: column;
overflow: scroll;
}
.container {
flex: 1;
border: 1px solid red;
display: flex;
flex-direction: column;
}
#listItems {
border: 1px solid green;
height: 100%;
}
#listItems > ul {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
border: 1px solid purple;
width: 200px;
height: 200px;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361311.html