contain-intrinsic-height: value; object.style.containIntrinsicHeight = "value"; <'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>.
<!doctype html>
<html>
<head>
<style>
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
contain-intrinsic-height: 100px;
content-visibility: hidden;
}
</style>
</head>
<body>
<div>length</div>
<div>length</div>
<div>length</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
contain-intrinsic-height: auto 200px;
content-visibility: hidden;
}
</style>
</head>
<body>
<div>auto length</div>
<div>auto length</div>
<div>auto length</div>
</body>
</html>
<!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(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">none</button>
<button onmouseover="myfunction(value)" value="100px">length</button>
<button onmouseover="myfunction(value)" 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;
}
}
</script>
</body>
</html>
<!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>
<!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>
<!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>