html - 为什么我的Bootstrap 5中的元素总是溢出?
问题描述
我的界面中有一个包含很多元素的元素。一旦列表扩展到整个屏幕,滚动条就会出现在列表中。该元素通过 flex-grow 设置为占用 Right 列中剩余的高度空间。如果没有列表元素,该元素会完美地填充剩余的高度。但是,一旦元素中一个屏幕的元素太多,整个标签和屏幕就会溢出。
元素在<div id=content">
元素空间上的高度溢出,<body>
尽管我将 bodymax-height
属性设置为100vh
对我来说似乎不合适。
这是我的代码的一个小例子: Codepen
如何调整代码以显示在 y 轴上显示滚动条的许多元素的元素?
html,
body {
height: 100vh;
max-height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSV Parser Tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP CSS & JS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- PLOTLY JS -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body class="h-100 d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Link 1</a>
<a class="nav-item nav-link" href="#">Link 1</a>
<a class="nav-item nav-link" href="#">Link 1</a>
<a class="nav-item nav-link" href="#">Link 1</a>
</div>
</div>
<div class="d-flex">
<a class="btn btn-danger mr-xl-3 mr-l-3" href="{{ url_for('reset') }}" role="button">Reset</a>
</div>
</nav>
<div id="content" class="flex-grow-1 container-fluid">
<div class="row h-100">
<div class="col-xl-6 h-100">
<div class="container-fluid h-100">
<h2>File Picker</h2>
</div>
</div>
<div class="col-xl-6 h-100">
<div class="container-fluid h-100 d-flex flex-column">
<h2>This is my overflowing list view</h2>
<div class="flex-grow-1">
<ul class="overflow-scroll">
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
<li class="list-group-item">Element</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
通过向flex-grow 父元素和子元素添加属性,我能够使用此答案解决问题。min-height=0
推荐阅读
- jenkins - 从另一个分支上的另一个仓库构建 Jenkins 管道(作业)
- html - 按钮单击与页面加载的行为不同
- python - 根据用户的回答列出清单
- broadcastreceiver - 是一种让广播“等待”直到接收器启动的方法吗?
- node.js - 如何更改 Gatsby JS 中的默认 Webpack 加载器?
- javascript - 如何在 Selenium WebDriver 中使用 JavaScriptExecutor 在加载 js 脚本时执行 js 函数
- next.js - NextjS 图片问题与 src 和默认外部图片 URL
- r - R 中的 W-NOMINATE 方法:错误数据包含 x 或 y 或 z 以外的值
- react-native - 来自本地设备的loadGraphModel模型json ERROR React Native
- typescript - 如何使用生成的模式获取 GraphQL 请求上下文