时间戳

首页 > 解决方案 > 弹性项目内的可滚动div

css - 弹性项目内的可滚动div

问题描述

试图在 flex-item 中创建一个可滚动的 div。如果内容超出视口，此处的编辑部分应该是可滚动的。在 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

解决方案

当您使用子元素的高度并且希望该元素溢出时 - 您需要对父元素应用高度。请记住，子元素的高度取决于它们所在的容器。

另外——最好不要使用内联样式——而是将你的 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>

推荐阅读