Skip to content
Related Articles

Related Articles

HTML | DOM Style flexShrink Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!