如何防止元素大<ul>从 flexbox 布局中溢出的身体
[英]How to prevent element with a big <ul> from overflowing body in flexbox layout
问题描述
我在试图表述我遇到的问题时遇到了一些严重的问题，如果它仍然不够好，我很抱歉
所以，我的应用程序中有 3 张卡片，而 2 张横向卡片的列表 ( <ul> ) 可以变得非常大，我希望滚动条出现在<ul>本身上，而不是出现在“主窗口”中。
这就是我想要的样子：
这是发生的事情：
我能够通过在我的列表中设置max-height: 80vh第一个屏幕截图，但这是一个非常笨拙的解决方案，它仅适用于非常特定的屏幕尺寸。
这是代码笔，只需按“添加更多项目”几次，问题就会出现
这是“主要”css 和基本的 html 结构，以防您不想检查 codepen
<div class="room-wrapper">
<div><button class="btn btn-primary add-more-btn">Add more items</button></div>
<div class="room-content">
<div class="left-card app-card">
<div class="left-card-wrapper">
<div>
<h3>Left Card</h3>
<hr>
</div>
<ul class="my-list"></ul>
</div>
</div>
<div class="main-card app-card"></div>
<div class="right-card app-card">
<div class="players-wrapper">
<div>
<h3>Right Card</h3>
<hr>
</div>
<ul class="my-list"></ul>
</div>
</div>
</div>
</div>
.room-wrapper {
display: flex;
flex-flow: column;
height: 100%;
padding: 10px;
}
.room-content {
flex: 1 1 auto;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.my-list {
overflow-y: auto;
/* This would "solve" it, but only for an really
specific window size, this is what i used for
the first screenshot
max-height: 80vh;
*/
}
4 个解决方案
解决方案1
1 2021-07-17 06:15:49
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #dadada; } .room-wrapper { display: flex; flex-flow: column; height: 100%; padding: 10px; } .room-content { flex: 1 1 auto; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; } .app-card { height: 85vh; border-radius: 10px; margin: 10px 10px; padding: 10px; background-color: white; flex-basis: 0; flex-grow: 1; flex-shrink: 1; } .main-card { flex-grow: 2!important; } .form-wrapper { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .my-list { display: block; height: 90%; overflow-y: auto; } .add-more-btn { margin: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="room-wrapper"> <div><button class="btn btn-primary add-more-btn">Add more items</button></div> <div class="room-content"> <div class="left-card app-card"> <div> <h3>Left Card</h3> <hr> </div> <ul class="my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> <div class="main-card app-card"></div> <div class="right-card app-card"> <div> <h3>Right Card</h3> <hr> </div> <ul class="my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> </div> </div> <script src="script.js"></script> </body> </html>
解决方案2
1 已采纳 2021-07-17 06:24:20
有一些小的变化和使用flex属性。 我已经使解决方案起作用了。
只需添加以下额外的 css，您的布局就会看起来很完美。
.my-list {
flex: 1 1 1px;
}
.players-wrapper,
.left-card-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
$(".add-more-btn").click(() => { $(".list-group").append("<li class=\\"list-group-item\\">Item</li>"); });
body, html { height: 100%; } body { background-color: #dadada; } .room-wrapper { display: flex; flex-flow: column; height: 100%; padding: 10px; } .room-content { flex: 1 1 auto; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; } .app-card { border-radius: 10px; margin: 10px 10px; padding: 10px; background-color: white; flex-basis: 0; flex-grow: 1; flex-shrink: 1; } .main-card { flex-grow: 2 !important; } .form-wrapper { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .my-list { overflow-y: auto; } .add-more-btn { margin: 10px; } .my-list { flex: 1 1 1px; } .players-wrapper, .left-card-wrapper { height: 100%; display: flex; flex-direction: column; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="room-wrapper"> <div><button class="btn btn-primary add-more-btn">Add more items</button></div> <div class="room-content"> <div class="left-card app-card"> <div class="left-card-wrapper "> <div> <h3>Left Card</h3> <hr> </div> <ul class="list-group text-left my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> </div> <div class="main-card app-card"> <div class="form-wrapper"> <div class="form-header"> <h3>Form</h3> <hr> </div> <div class="form-main"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Example multiple select</label> <select multiple class="form-control" id="exampleFormControlSelect2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </form> </div> <div class="text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </div> <div class="right-card app-card"> <div class="players-wrapper"> <div> <h3>Right Card</h3> <hr> </div> <ul class="list-group text-left my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> </div> </div> </div>
解决方案3
1 2021-07-17 07:13:02
我想这就是你想要的！ 检查它。 您也可以在此处查看：在 codepen 上
body, html { height: 100%; } body { background-color: #dadada !important; } .room-wrapper { display: flex; flex-flow: column; height: 100%; padding: 10px; } .room-content { flex: 1 1 auto; text-align: center; height: calc(100% - 78px); display: flex; justify-content: center; flex-wrap: wrap; } .app-card { border-radius: 10px; margin: 10px 10px; padding: 10px; background-color: white; flex-basis: 0; flex-grow: 1; flex-shrink: 1; height:98%; } .main-card { flex-grow: 2!important; } .form-main{ height:calc(100% - 78px); overflow:auto; } .form-wrapper { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .my-list { overflow-y: auto; height: calc(100% - 78px); } .add-more-btn { margin: 10px; } .right-card>div,.left-card>div{ height:100%; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="room-wrapper"> <div><button class="btn btn-primary add-more-btn">Add more items</button> <button type="submit" class="btn btn-primary">Submit</button></div> <div class="room-content"> <div class="left-card app-card"> <div class="left-card-wrapper "> <div> <h3>Left Card</h3> <hr> </div> <ul class="list-group text-left my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> </div> <div class="main-card app-card"> <div class="form-wrapper"> <div class="form-header"> <h3>Form</h3> <hr> </div> <div class="form-main"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Example multiple select</label> <select multiple class="form-control" id="exampleFormControlSelect2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </form> </div> </div> </div> <div class="right-card app-card"> <div class="players-wrapper"> <div> <h3>Right Card</h3> <hr> </div> <ul class="list-group text-left my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> </div> </div> </div> </body>
解决方案4
1 2021-07-17 08:28:54
.room-content { display: flex; box-shadow: inset 0px 0px 7px #ccc; padding: 1rem 2rem; margin-top: 2rem; background: #f6f6f6; } .room-content > div { flex: 1; border: 1px solid #e4e4e4; padding: 1rem; background: white; margin-right: 1rem; border-radius: 10px; } .room-content > div:last-child { margin-right: 0rem; } ul { padding: 0; overflow: scroll; height: 72vh; } .list-group-item { list-style-type: none; padding-block: 10px; border-bottom: 1px solid #eae9e9; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Three List</title> </head> <body> <div class="room-wrapper"> <div> <button class="btn btn-primary add-more-btn">Add more items</button> </div> <div class="room-content"> <div class="left-card app-card"> <div> <h3>Left Card</h3> <hr /> </div> <ul class="my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> <div class="main-card app-card"></div> <div class="right-card app-card"> <div> <h3>Right Card</h3> <hr /> </div> <ul class="my-list"> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> <li class="list-group-item">Item</li> </ul> </div> </div> </div> <script src="script.js"></script> </body> </html>
如何防止最右边的内联元素在CSS中包装或溢出？
[英]How to prevent rightmost inline element from wrapping or overflowing in CSS?
带有ul的WordPress菜单：防止下拉菜单容器溢出
[英]WordPress Menu with ul: prevent drop down from overflowing menu container
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.