Сохранять высоту контейнера для содержимого Dynami c

Question

У меня есть контейнер с контентом. width контейнера фиксирован, но его высота определяется его внутренним содержимым.

Изначально содержимое контейнера определяет высоту контейнера. Затем я хочу уменьшить содержимое внутренних элементов, сохранив при этом исходную высоту контейнера.

В приведенном ниже фрагменте моя цель - сохранить исходную высоту красного прямоугольника, при этом уменьшая размер шрифта для внутреннее содержание.

function changeSize() {
  document.querySelector('.box').classList.add('active');
}

.container {
  border: 1px solid red;
  width: 30%;
}

.box {
  background: lime;
  transition: font-size 1s linear;
}

.box.active {
  font-size: 5px;
}

<div class="container">
  <p class="box">This is some text which changes size and causes the container to change height.</p>
</div>

<button onclick="changeSize()">Change text size</button>

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

Я знаю, что могу дать контейнеру (ie: красный прямоугольник) фиксированную высоту, но я хочу, чтобы его высота определялась начальной высотой его внутреннего содержимого.

Можно ли как-то использовать CSS, чтобы сохранить исходную высоту контейнера, но при этом иметь возможность изменять размер дочернего элемента? Я попытался добавить в контент элемент-оболочку, но не был уверен, где оттуда go.

Answer 1

Получить высоту коробки и установить ее перед изменением шрифта. Убедитесь, что поля также фиксированы.

JS:

function changeSize() {
    var box = document.querySelector('.box');
    var height = box.offsetHeight;
  box.style.height = height + "px";
  document.querySelector('.box').classList.add('active');
}

CSS:

.container {
  border: 1px solid red;
  width: 30%;
}

.box {
  background: lime;
  transition: font-size 1s linear;
  margin: 10px;
}

.box.active {
  font-size: 5px;
}

Пример: https://jsfiddle.net/ufgo5prv/

Answer 2

моя цель - сохранить исходную высоту красного прямоугольника, при этом уменьшая размер шрифта внутреннего содержимого.

Возможно, лучшая идея - применить transform: scale(…) , вместо того, чтобы манипулировать font-size.

Это приведет к масштабированию всего элемента, а не только к уменьшению размера шрифта, который обычно выглядит более плавным с самого начала - и преобразование элемента оставляет пространство, которое он изначально занимал , зарезервировано - поэтому ваш контейнерный элемент также не будет уменьшаться по высоте.

Answer 3

Используйте min-height, чтобы установить начальную высоту. вы можете изменить высоту в скрипте.

var innerContent = document.getElementsByClassName("box");
console.log(innerContent[0].clientHeight);

var container = document.getElementsByClassName("container"); 
console.log(container);
container[0].style.minHeight = innerContent[0].clientHeight + 40 + "px";

function changeSize() {
  document.querySelector('.box').classList.add('active');

}

.container {
  border: 1px solid red;
  width: 30%; 
}

.box {
  background: lime;
  transition: font-size 1s linear;
}

.box.active {
  font-size: 5px;
}

<div class="container">
  <p class="box">This is some text which changes size and causes the container to change height.This is some text which changes size and causes the container to change height.</p>
</div>

<button onclick="changeSize()">Change text size</button>