Прокручиваемый div внутри гибкого элемента - PullRequest
Новая
       0

Прокручиваемый div внутри гибкого элемента

0 голосов
/ 27 мая 2020

Попытка сделать прокручиваемый div внутри flex-item. Раздел редактирования здесь должен быть прокручиваемым, если контент выходит за пределы области просмотра. В 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>

1 Ответ

0 голосов
/ 27 мая 2020

Когда вы используете высоту дочернего элемента и хотите, чтобы этот элемент был переполнен, вам необходимо применить высоту к родительскому элементу. Помните, что высота дочерних элементов зависит от контейнера, в котором они находятся.

Также - лучше не использовать встроенные стили, а отделить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...