A CSS trick to use clamp() with sizing values like auto, min-content, max-content, etc

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

The clamp() function in CSS doesn't accept sizing keywords like auto, min-content, or max-content directly. The new calc-size() function solves this limitation by allowing these keywords as its first argument, with the second argument being a calculation where 'size' refers to the first argument. This enables combinations like clamp(100px, calc-size(auto, size), 500px). Currently, this feature has limited browser support and only works in Chrome.

How to use the "auto" value with clamp()

<p>Great! I’ve seen your answer on Stackoverflow btw</p>
