flex项目中的可滚动div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex项目中的可滚动div相关的知识，希望对你有一定的参考价值。
[尝试在flex-item中创建可滚动的div。如果内容超出视口，则此处的Edit-section应该是可滚动的。 Edge和Firefox一切正常，但Chrome忽略max-height: 100%。如何实现所需的行为？
<html>
<head>
<title>test</title>
</head>
<body style="margin: 0">
<div id="root" style="height: 100vh; font-size: 100px">
<div id="form" style="max-height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap;">
<div id="header" style="background-color: red; margin-bottom: 1px">header</div>
<div id="form-body" style="overflow: hidden; position: relative">
<div id="edit-section" style="overflow-y: scroll; max-height: 100%">
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
</div>
</div>
</div>
</div>
</body>
</html>答案
也-不使用内联样式-将您的CSS分离到其自己的文件中并将其导入文档中是不言而喻的。 html, body ,#root {
height: 100vh; font-size: 100px; overflow: hidden
}
#form {
height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap;
}
#header {
background-color: red; margin-bottom: 1px
}
#form-body {
overflow: hidden; position: relative;height: 100%;
}
#edit-section {
overflow-y: scroll; height: 100%;
}<div id="root">
<div id="form" >
<div id="header">header</div>
<div id="form-body">
<div id="edit-section">
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
<div><textarea rows="10"></textarea></div>
</div>
</div>
</div>
</div>以上是关于flex项目中的可滚动div的主要内容，如果未能解决你的问题，请参考以下文章
vue项目中h5移动端中通过flex布局实现首尾固定，中间滚动（借鉴）
Angular CDK - 在嵌套的可滚动 div 内滚动和拖动元素的问题