Size

/* set size of element */
width: 100%; /* make width as width of parent element */
height: 300px; /* set hard height to 300 pixels */

/* set limit on maximum possible size */
max-width: 700px;
max-height: 700px;

/* set limit on minimum possible size */
min-width: 100px;
min-height: 100px;

/* some properties also can affect to the element size */
resize: vertical;
box-sizing: border-box;
display: block;

box-sizing

By default, width and height apply only to the content of the element. This does not include padding and border width. This is can ve changed by property box-sizing. Some libraries like Bootstrap already do it.

<div style="width: 64px;             
        height: 64px; border: 1px solid red;">

    <div style="width: 60px; height: 60px; 
          border: 15px solid blue;
          box-sizing: content-box;" />
</div>

<div style="width: 64px;             
        height: 64px; border: 1px solid red;">

    <div style="width: 60px; height: 60px; 
          border: 15px solid blue;
          box-sizing: border-box;" />
</div>

resize

The resize property defines can user resize element or not. Property does nothing unless the overflow property is set.

The <textarea> element by default is resizable, and others not.

Some browsers (IE, Edge) have problem with this property, but may be in future ...

Possible values:

• none - not resizable
• both - resizable in both directions
• horizontal - resizable in the horizontal direction
• vertical - resizable in the vertical direction

<div style="width: 96px; height: 96px; 
border: 1px solid red; 
overflow: scroll;  
resize: both;">