FTR, this is the simplest and more dynamical solution I have been able to find:

.container { resize: horizontal; min-width: 32px; max-width: 560px; margin: 0 auto; padding: 8px; height: auto; width: 320px; background-color: pink; overflow: hidden; container-type: inline-size; /* defines the element as a container */ } .container span { font-size: 8px; /* fallback for unsupported browsers */ font-size: clamp(8px, 4.5cqw, 22px); /* minimum 8px, based on 4.5cqw, maximum 22px */ } 

<div class="container"> <span>Resize my container and, if your browser allows, I will shrink!</span> </div> 

The key is (besides adding that container-type) simply using the new cqw, cqh, etc. container based kind of units, which luckily seem to be already supported by major browsers and support only can increase due to their usefulness... Cheers.

FTR, this is the simplest and more dynamical solution I have been able to find:

.container { resize: horizontal; min-width: 32px; max-width: 560px; margin: 0 auto; padding: 8px; height: auto; width: 320px; background-color: pink; overflow: hidden; container-type: inline-size; /* defines the element as a container */ } .container span { font-size: 8px; /* fallback for unsupported browsers */ font-size: clamp(8px, 4.5cqw, 22px); /* minimum 8px, based on 4.5cqw, maximum 22px */ }

<div class="container"> <span>Resize my container and, if your browser allows, I will shrink!</span> </div>

The key is (besides adding that container-type) simply using the new cqw, cqh, etc. container based kind of units, which luckily seem to be already supported by major browsers and support only can increase due to their usefulness... Cheers.

FTR, this is the simplest and more dynamical solution I have been able to find:

.container { resize: horizontal; min-width: 32px; max-width: 560px; margin: 0 auto; padding: 8px; height: auto; width: 320px; background-color: pink; overflow: hidden; container-type: inline-size; /* defines the element as a container */ } .container span { font-size: 8px; /* fallback for unsupported browsers */ font-size: clamp(8px, 4.5cqw, 22px); /* minimum 8px, based on 4.5cqw, maximum 22px */ }

<div class="container"> <span>Resize my container and, if your browser allows, I will shrink!</span> </div>

The key is (besides adding that container-type) simply using the new cqw, cqh, etc. container based kind of units, which luckily seem to be already supported by mayor browsers and support only can increase due to their usefulness... Cheers.

FTR, this is the simplest and more dynamical solution I have been able to find:

.container { resize: horizontal; min-width: 32px; max-width: 560px; margin: 0 auto; padding: 8px; height: auto; width: 320px; background-color: pink; overflow: hidden; container-type: inline-size; /* defines the element as a container */ } .container span { font-size: 8px; /* fallback for unsupported browsers */ font-size: clamp(8px, 4.5cqw, 22px); /* minimum 8px, based on 4.5cqw, maximum 22px */ } 

<div class="container"> <span>Resize my container and, if your browser allows, I will shrink!</span> </div> 

The key is (besides adding that container-type) simply using the new cqw, cqh, etc. container based kind of units, which luckily seem to be already supported by major browsers and support only can increase due to their usefulness... Cheers.