HTML | DOM Style flexShrink Property

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style flexShrink Property
    </title>
    <style>
        #Geeks {
            width: 350px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
        }
        
        #Geeks 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="Geeks">
        <div style="background-color:#64c962;
                    color:white;">
          GeeksForGeeks1
      </div>
        <div style="background-color:#2c932a;
                    color:white;" 
             id="Geeks2">
          GeeksForGeeks2
      </div>
    </div>
  
    <script>
        function GFG() {
          
            // Safari 6.1+
            document.getElementById(
              "Geeks2").style.WebkitFlexShrink = "5"; 
          
            document.getElementById(
              "Geeks2").style.flexShrink = "5";
        }
    </script>
</body>

</html>

Output:

Example-2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style flexShrink Property
    </title>
    <style>
        #Geeks {
            width: 350px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
        }
        
        #Geeks div {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 300px;
        }
    </style>
</head>

<body>
    <h3>The flex-shrink Property</h3>
  
    <div id="Geeks">
        <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

Explore