Skip to content
Related Articles

Related Articles

HTML | DOM Style flexShrink Property
  • Last Updated : 31 Jul, 2019

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>
        #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:






<!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 HashChangeEvent property are listed below:

  • Google Chrome 5.0
  • Internet Explorer 8.0
  • Firefox 3.6
  • Opera 10.6
  • Safari 5.0

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :