HTML

The Style flexShrink property in HTML DOM is used to set how the specific item can be shrink in relation to the remaining flexible items within the container.

Syntax:

It is used to return the flexShrink property.

object.style.flexShrink

It is used to set the flexShrink property.

object.style.flexShrink = "number|initial|inherit"

Property Values:

number: It is used to set a number which specify how much item is shrinkable in relation to the remaining flexible items. Its default value is 0.
initial: It sets the flexShrink property to its default value.
inherit: This property value is inherited from its parent element.

Example-1:

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Style flexShrink Property
    </title>
    <style>
        #Beginner {
            width: 350px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
        }
         
        #Beginner div {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 300px;
        }
    </style>
</head>
 
<body>
    <h4>Click the button</h4>
    <button onclick="GFG()">Click Here!
        <br>
    </button>
    <p></p>
    <div id="Beginner">
        <div style="background-color:#64c962;
                    color:white;">
          w3wiki1
      </div>
        <div style="background-color:#2c932a;
                    color:white;" 
             id="Beginner2">
          w3wiki2
      </div>
    </div>
   
    <script>
        function GFG() {
           
            // Safari 6.1+
            document.getElementById(
              "Beginner2").style.WebkitFlexShrink = "5"; 
           
            document.getElementById(
              "Beginner2").style.flexShrink = "5";
        }
    </script>
</body>
 
</html>

Output:

Example-2:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Style flexShrink Property
    </title>
    <style>
        #Beginner {
            width: 350px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
        }
         
        #Beginner div {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 300px;
        }
    </style>
</head>
 
<body>
    <h3>The flex-shrink Property</h3>
   
    <div id="Beginner">
        <div style="background-color:#44cc3f;">
      </div>
        <div style="background-color:#34a030;">
      </div>
        <div style="background-color:#2c932a;">
      </div>
        <div style="background-color:#267023;">
      </div>
        <div style="background-color:#175415;">
      </div>
    </div>
   
</body>
 
</html>

Output:

Supported Browsers: The browser supported by DOM flex-shrink property are listed below:

Google Chrome 29.0 and above
Edge 12.0 and above
Internet Explorer 10.0 and above
Firefox 20.0 and above
Opera 12.1 and above
Safari 9.0 and above

HTML | DOM Style flexShrink Property

HTML

HTML

Contact Us