The auto setting in the CSS clamp function is not functioning properly when used as the minimum, value,

Question

The auto setting in the CSS clamp function is not functioning properly when used as the minimum, value,

I have been trying to use the css function clamp() to control the height of my div, but for some reason it is not behaving as I expected.

.container{
    height: clamp(200px, auto, 400px);
}

Interestingly, it works perfectly fine when I define the heights individually like this:

.container{
    min-height: 200px;
    height: auto;
    max-height: 400px;
}

According to the documentation on css clamp(): MDN Web Docs, it should essentially combine the functionalities of min, max and value. So why is it not working in my case?

html css clamp

Answer 1

Answer №1

Upon examining the specified syntax, it is evident:

The structure of clamp( <calc-sum>#{3} ) follows:
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

auto does not form part of the syntax, which makes sense as comparing auto with pixel value (or any length) is not valid.

You might assume that the browser would begin by applying auto to height to determine the content-based height value, convert it to

px</code, and then use this in the <code>clamp()

function. However, this is not how it operates.

The browser initially attempts to resolve clamp(200px, auto, 400px), but this is invalid since auto is not a <calc-value>. The specific property to which it applies is irrelevant.

Answer 2

Upon examining the specified syntax, it is evident:

The structure of clamp( <calc-sum>#{3} ) follows:
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

auto does not form part of the syntax, which makes sense as comparing auto with pixel value (or any length) is not valid.

You might assume that the browser would begin by applying auto to height to determine the content-based height value, convert it to

px</code, and then use this in the <code>clamp()

function. However, this is not how it operates.

The browser initially attempts to resolve clamp(200px, auto, 400px), but this is invalid since auto is not a <calc-value>. The specific property to which it applies is irrelevant.

The auto setting in the CSS clamp function is not functioning properly when used as the minimum, value,

Answer №1

Similar questions

Gather information using HTMLParser

What is the best way to update an existing cookie value using angularjs?

Is there a way to override the padding of a container?

Executing a JavaScript function using document.write()

Step-by-step guide on creating a clickable button that triggers the appearance of a block showcasing a dimmed photo upon activation

Exploring AngularJS ng-repeat features for custom attribute settings

What is the best way to retain data after clicking a button?

Obtain the beginning and ending positions of a substring within a larger string

Tips on adjusting the default width of the React player interface

Displaying a single row of a PHP array in bold formatting

Instructions on connecting something from manifest.json

Exploring the width of Bootstrap 5 Tab Pane content

What is the best way to utilize a single component for validating two other components?

How can I dynamically populate a select menu in HTML without the need to submit any data

Guide on transferring href parameter from the parent Vue component to the child component

Customize button design with data from API request

CSS: Turn off the custom styling for radio buttons

Tips for adjusting the size of your Navigation bar

In which orientation does the iPad come configured as standard?

Ways to retrieve the href attribute value from an element in Python/Selenium even when there is no explicit href attribute present