The HTML DOM Style flexShrink property is used to set the proportion by which an element shrinks its size with respect to its siblings inside a flex element.
Following is the syntax for −
Setting the flexShrink property −
object.style.flexShrink = "number|initial|inherit"
Here, “number” specifies how much the element shrinks in proportion to other elements and its default value is 0. The “initial” sets the property value to the default value while “inherit” sets it to the parent property value.
Let us look at an example for the flexShrink property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
}
#demo {
width: 500px;
height: 30px;
display: flex;
text-align: center;
font-size: 1.2em;
line-height: 30px;
}
#demo div {
flex-basis: 120px;
}
</style>
<script>
function changeFlexShrink() {
document.getElementsByTagName("DIV")[4].style.flexShrink="3";
document.getElementById("Sample").innerHTML="The fourth element has been shrinked by 3x their counterparts";
}
</script>
</head>
<body>
<div id="demo">
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<div>Fourth Div</div>
<div>Fifth Div</div>
</div>
<br>
<p>Change the 4th div shrink property in the above divs by clicking the below button</p>
<button onclick="changeFlexShrink()">Change Flex Shrink</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Flex Shrink” button −
