I want the element to automatically increase / decrease when I scale / reduce the page.
My code is:

.element1 { width: auto; height: auto; background-color: gray; } 
 <div class="element1"> </div>

Why is this code not working? :(

    2 answers 2

    What you want to do can be done in several ways.
    Here's a way using flex . The element behaves like a block and lays out the contents according to the flex model:

     * { margin: 0; padding: 0; } .flex{ display: flex; background: gray; } .element1 { width:100%; height: 100%; background: green; margin: 5px; } .element2 { width: 100%; height: 100%; background: red; margin: 5px; } 
     <div class="flex"> <div class="element1"> block 1 </div> <div class="element2"> block 2 </div> </div>

    References:

    We use CSS Flexible Boxes
    Flexbox sandbox
    Flexbox Froggy chic visual sandbox for understanding how to work

      Because auto means: "how much it takes to fit the content and no more."
      In your case, you can do this:

       * { margin: 0; padding: 0; } html, body, .element1 { width: 100%; height: 100%; } .element1 { background: gray; } 
       <div class="element1"></div>

      html and body are needed because 100% is counted from the parent.