contain-intrinsic-height

Description
Syntax
Examples
Links

Description

The contain-intrinsic-height property for CSS allows elements with size containment to specify an explicit intrinsic inner height.

Syntax

CSS

contain-intrinsic-height: value;

JS

object.style.containIntrinsicHeight = "value";

Values

<'contain-intrinsic-height'> = none | <length> | auto <length>

none

The corresponding axis does not have an explicit intrinsic inner size.

<length>

The corresponding axis has an explicit intrinsic inner size of the specified <length>.

auto <length>

If the element has a last remembered size and is currently skipping its contents, its explicit intrinsic inner size is the last remembered size. Otherwise, its explicit intrinsic inner size is the specified <length>.

Initial

none

Examples

1 · none

2 · length

3 · auto length

4 · JS

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, yellow);
            contain-intrinsic-width: 100px;
            width: fit-content;

div
            {
                background-image: linear-gradient(135deg, white, lightgray);
                height: 100px;
                width: 100px;
            }
        }
        .myclass2
        {
            content-visibility: hidden;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>none</button>
    <button value="100px">length</button>
    <button value="auto 200px">auto length</button>
    <div class="myclass1">
        <div>contain-intrinsic-height</div>
    </div>
    <div class="myclass1 myclass2">
        <div>contain-intrinsic-height</div>
    </div>
    <div class="myclass1">
        <div>contain-intrinsic-height</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            for(const mydiv of document.querySelectorAll(".myclass1"))
            {
                mydiv.style.containIntrinsicHeight = myproperty;
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>