Разрешить при изменении размера игнорировать максимальную высоту?

У меня есть код вроде первого фрагмента - мне любопытно, есть ли способ использовать изменение размера и разрешить ему игнорировать максимальную высоту?

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

В основном я пытаюсь получить что-то похожее на первое, но работающее как второе.

Спасибо!

.content {
  max-height: 5em;
	overflow-y: auto;
	resize: vertical;
  white-space: pre-wrap;
 }
<div class="content">One line</div>
<div class="content">Multi
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
line</div>

Это не работает для того, что я пытаюсь сделать, из-за лишнего пробела:

.content {
  height: 5em;
	overflow-y: auto;
	resize: vertical;
  white-space: pre-wrap;
 }
<div class="content">One line</div>
<div class="content">Multi
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
line</div>

В ответ на первый ответ контент является динамичным. Я привел динамический пример

rand1 = Math.floor((Math.random() * 10) + 1);
rand2 = Math.floor((Math.random() * 10) + 1);
document.getElementById("1").innerHTML = "Start"
for (var i = 0; i < rand1; i++) {
  document.getElementById("1").innerHTML += ".\n"
}
document.getElementById("2").innerHTML = "Start"
for (var i = 0; i < rand2; i++) {
  document.getElementById("2").innerHTML += ".\n"
}
.content {
  max-height: 5em;
  overflow-y: auto;
  resize: vertical;
  white-space: pre-wrap;
}
<div class="content" id="1"></div>
<div class="content" id="2"></div>
0
0
443
3

Ответы 3

Удалите первый класс деления, как показано ниже <div class="content">One line</div>.

<div>One line</div>

Содержимое div в моем реальном проекте генерируется динамически, а это означает, что переполнение может потребоваться, а может и не потребоваться.

Sam T. 26.10.2018 19:18

Вы можете сделать это с помощью чистого CSS. Когда вы изменяете размер элемента, свойство высоты автоматически создается в теге стиля элемента html.

Если вы создадите селектор css, который ссылается на этот атрибут и отменяет максимальную высоту в случае, если «высота» существует, вы получите желаемый эффект.

.content {
  max-height: 5em;
  overflow-y: auto;
  resize: vertical;
  white-space: pre-wrap;
 }
.content[style*="height"] {
  max-height: unset; 
} 

Спасибо за это простое и элегантное решение!

Tess 30.03.2021 17:21

Вопрос не совсем ясный. Кажется, вам нужен первый контейнер с динамической высотой, а второй - с максимальной высотой, не так ли?

Если вам нужно что-то, что заполняет первый div столько же, сколько и содержимое в нем, вы можете использовать min-height для первого контейнера и просто использовать max-height только для второго.

Другие вопросы по теме