contain-intrinsic-height

The contain-intrinsic-height CSS property 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 · Inline

5 · JS · Inline · event

<!doctype html>
<html>
<head>
    <style>
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            content-visibility: hidden;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(event)">initial</button>
    <button onmouseover="myfunction(event)">none</button>
    <button onmouseover="myfunction(event)" value="100px">length</button>
    <button onmouseover="myfunction(event)" value="auto 200px">auto length</button>
    <div>contain-intrinsic-height</div>
    <div>contain-intrinsic-height</div>
    <div>contain-intrinsic-height</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const myelements = document.querySelectorAll("div");
            for(const myelement of myelements)
            {
                myelement.style.containIntrinsicHeight = myproperty;
            }
        }
    </script>
</body>
</html>

6 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            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>contain-intrinsic-height</div>
    <div>contain-intrinsic-height</div>
    <div>contain-intrinsic-height</div>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("div");
            for(const myelement of myelements)
            {
                myelement.style.containIntrinsicHeight = myparameter;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(const myelement of myelements)
        {
            const myargument = myelement.value || myelement.innerHTML;
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

7 · JS · Internal · event

<!doctype html>
<html>
<head>
    <style>
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            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>contain-intrinsic-height</div>
    <div>contain-intrinsic-height</div>
    <div>contain-intrinsic-height</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const myelements = document.querySelectorAll("div");
            for(const myelement of myelements)
            {
                myelement.style.containIntrinsicHeight = myproperty;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(const myelement of myelements)
        {
            myelement.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>