The height of the text does not change using preprogrammed text.

I have a little problem here.

I am working on a project where I need to show a form after the user clicks on a call. Everything is fine so far.

The problem is that when the user clicks the button to display the form, the text box does not resize the height to fit the text and looks incomplete until the user centers the text box and moves the arrow keys.

Here is the code and example in Codepen

<div ng-app="test">
  <div class="holder" ng-controller="MainCtrl" layout="row" layout-align="center center">
    <div class="blocker" ng-show="blocked">
      <md-button class="md-raised md-warn" ng-click="toggle()">See me</md-button>
    </div>
    <div class="form" ng-hide="blocked">
      <form name="myForm">
        <md-input-container flex>
            <label>How are you</label>
            <textarea ng-model="answer1" name='answer1'></textarea>
        </md-input-container>  
      </form>
    </div>
  </div>
</div>

      

        
        
        
      

    

And the Javascript part

var app = angular.module('test', ['ngMaterial']);

app.controller( 'MainCtrl', function($scope){
  $scope.answer1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,";
  $scope.blocked = true;
  $scope.toggle = function(){
    $scope.blocked = !$scope.blocked;
  }
});

      

        
        
        
      

    

http://codepen.io/Tmeister/pen/wajdgE

Perhaps this is an Angular Material bug or just a CSS issue?

Thanks in advance!