Limit the max-height to fit the content size - css

Question

I have a resizable container, I want it to be able to be resized to fit the content inside, but not too large to waste space.
I got the code like
.container {
width: 200px;
height: 200px;
background: red;
resize: vertical;
overflow: hidden;
max-height: max-content;
}
.content {
background: yellow;
}
<div class="container">
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, molestiae? Officiis consequatur quod minima cum at ratione, sint ipsum architecto! Sit accusantium tenetur ducimus aut atque, eligendi in ullam sunt! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Maxime explicabo dolor sequi veritatis aut. Recusandae quibusdam maiores doloremque natus, aspernatur minus dignissimos, id soluta amet, blanditiis illum odio ab alias.
</div>
</div>
I try different value of max-height, only fixed value such as 300px works, but it is not what I want. The requirement is that the red space can not be there, like the attachment. Any idea?

Answer 1

Try height: fit-content;
**UPDATE**
At first I didn't understand what you were trying to achieve, but now I'm pretty sure what you need here.
Unfortunately, I think that this is impossible without javascript (I may be wrong).
So here is simple example with ResizeObserver that looks for container and if this element height exceeds content height it will be shrinked back to max height of content.
disconnecting observer before change of height and reconnecting back after this change is mandatory because change of height will trigger ResizeObserver and we will got and infinite loop.
According to this issue, best workaround to prevent logging massive amount of errors into console, is to reconnect observer via requestAnimationFrame
const container = document.querySelector('.container');
const content = container.querySelector('.content');
const resizeObserver = new ResizeObserver(event => {
const maxHeight = window.getComputedStyle(content).height.replace('px', '');
const containerHeight = event[0].contentRect.height;
resizeObserver.disconnect();
if (containerHeight > maxHeight) {
container.style.height = maxHeight + 'px';
}
requestAnimationFrame(() => resizeObserver.observe(container));
});
resizeObserver.observe(container);
.container {
width: 200px;
height: 200px;
background: red;
resize: vertical;
overflow: hidden;
max-height: max-content;
height: fit-content;
}
.content {
background: yellow;
}
<div class="container">
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, molestiae? Officiis consequatur quod minima cum at ratione, sint ipsum architecto! Sit accusantium tenetur ducimus aut atque, eligendi in ullam sunt! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Maxime explicabo dolor sequi veritatis aut. Recusandae quibusdam maiores doloremque natus, aspernatur minus dignissimos, id soluta amet, blanditiis illum odio ab alias.
</div>
</div>

Answer 2

I made a change to use JavaScript to set the max-height on the container with the offset set height from the content. That way it will not grow more than the content.
<div id="container" class="container">
<div id="content" class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, molestiae? Officiis consequatur quod minima cum at ratione, sint ipsum architecto! Sit accusantium tenetur ducimus aut atque, eligendi in ullam sunt! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Maxime explicabo dolor sequi veritatis aut. Recusandae quibusdam maiores doloremque natus, aspernatur minus dignissimos, id soluta amet, blanditiis illum odio ab alias.
</div>
</div>
<script>
var content = document.getElementById("content");
var container = document.getElementById("container");
container.style.maxHeight = content.offsetHeight + "px";
</script>