contain-intrinsic-block-size: value; object.style.containIntrinsicBlockSize = "value"; <'contain-intrinsic-block-size'> = 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-block-size: 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-block-size: 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>initial</button>
<button>none</button>
<button value="100px">length</button>
<button value="auto 200px">auto length</button>
<div>contain-intrinsic-block-size</div>
<div>contain-intrinsic-block-size</div>
<div>contain-intrinsic-block-size</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
for(const mydiv of document.querySelectorAll("div"))
{
mydiv.style.containIntrinsicBlockSize = myproperty;
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>