Maintain container height of dynamic content

Question

I have a container with content. The container's width is fixed but its height is determined by its inner content.

Initially, the content of the container causes the container to be a particular height. I then want to shrink the inner elements content while maintaining the original height of the container.

In the snippet below, my goal is to maintain the initial height of the red box while still shrinking the font-size of the inner content.

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;
}


  This is some text which changes size and causes the container to change height.

At the moment, the red-box shrinks with the inner content, whereas I want it to remain at its initial height.

I know I can give the container (ie: red box) a fixed height, but I want its height to be determined by the initial height of its inner contents.

Is there anyway to use CSS to maintain the initial height of the container while also being able to change the size of the child element? I tried adding a wrapper element to the content but wasn't too sure where to go from there.

user_6512857 · Answer

Get the height of the box and set it before changing the font. Make sure the margins are fixed too.

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;
}

Example: https://jsfiddle.net/ufgo5prv/

user_1427878 · Answer

my goal is to maintain the initial height of the red box while still shrinking the font-size of the inner content.

Perhaps a better idea, to apply a transform: scale(…), rather than to manipulate the font-size.

This will scale the whole element, not just reduce the font-size, that usually looks smoother to begin with - and transforming an element, leaves the space it originally occupied, reserved - so your container element will not shrink in height as well.

user_6285054 · Answer

Use min-height to set initial height. you can change height in script.

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;
}


  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.

Maintain container height of dynamic content

3 Answers