I've got an issue with my responsive textarea. It works fine (across different sizes) until the user tries to expand the form (I've currently got it locked in size with a height/max-height/width/max-width combo). Is there a solution to this? What am I doing wrong - haven't seen this issue before.

Album -   

<http://imgur.com/a/9ICnF#0>

Website -   

<http://pxlprfct.co.uk/>

Html

```
<textarea name="message" id="message" placeholder="Message"></textarea>

```

Css

```
form{
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    background: black;

    /*Android Hack*/
    margin-top: -1px;
    padding-bottom: 2em;
}

    #message
{
    border: none;
    outline: none;
    color: black;

    display: block;
    background: white;
    padding: 1em;
    margin: auto;
    font-size: 1em;
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;

    height: 12em;
    max-height: 12em;

    width: 70%;
    max-width: 70%;

}

```

Sorry about the messy code - it's all been hacked together quickly! :)   

Thanks in advance!

<http://jsfiddle.net/qfYQN/1/>