Imagine a container with content, where the container's width is fixed but its height adjusts based on its inner content.
Initially, when the content causes the container to be a specific height, the challenge arises in shrinking the inner elements without changing the container's height.
In the code snippet provided, the objective is to retain the original height of the red box while decreasing the font size of the inner content.
function adjustSize() {
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 text changes size and affects the container height.</p>
</div>
<button onclick="adjustSize()">Adjust text size</button>Currently, both the red-box and inner content shrink proportionally. However, the desired outcome is for the red-box to maintain its initial height.
While imposing a fixed height on the container (red box) could solve this challenge, the goal is to have the height dynamically determined by the initial inner contents.
Is there a CSS solution to preserve the container's initial height while modifying the child element's size? The attempt at using a wrapper element was made, yet further guidance is sought.