Open In App

HTML | DOM Style flexShrink Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads