title: angularjs material extra row and long word creates wrong layout
body: <p>i have following html in angularjs material:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('MyApp', ['ngMaterial']);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/&gt;
      &lt;body ng-app="MyApp" ng-cloak&gt;
      
        &lt;div layout="row" style="border: 5px solid red;"&gt;
          &lt;div layout="column" style="border: 5px solid purple;"&gt;
            &lt;div layout="row" style="border: 5px solid orange;"&gt;
              &lt;div layout="column" flex="50" style="border: 5px solid yellow;"&gt;
                &lt;md-content&gt;
                  LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfdksahfdlkfdshlsfdhkfdlfdsahfsdlkhfsdlfskdhlfsdkhfsdlkfhdslfdskhflkdslkhsafdhfslkdlsfhkd.
                &lt;/md-content&gt;
              &lt;/div&gt;
              &lt;div layout="column" flex="50" style="border: 5px solid green;"&gt;
                Contact
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div layout="column" style="border: 5px solid purple;"&gt;
          &lt;div layout="row" style="border: 5px solid orange;"&gt;
            &lt;div layout="column" flex="50" style="border: 5px solid yellow;"&gt;
              &lt;md-content&gt;
                LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfd
              &lt;/md-content&gt;
            &lt;/div&gt;
            &lt;div layout="column" flex="50" style="border: 5px solid green;"&gt;
              Contact
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Description of the situation:</strong></p>
  
  <p>there are two blocks, the first containing my problem, the second working fine</p>
  
  <p>the first one goes row>column>row>column(50%) | column(50%)</p>
  
  <p>and a second one which does not contain the first row e.g.</p>
  
  <p>column>row>column(50%) | column(50%)</p>
  
  <p>the first of the 50% columns on each example contains a very long word.</p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>In the first block the extra row seems to manipulate the layout in a way that the 50/50 rule does not apply anymore, since the block is not halved but instead the complete word is shown in the first 50% column whereas in the second block it works fine and the 50/50 rule is neatly applied and a scrollbar is shown in the inner md-content (or div).</p>
  
  <p><strong>Question</strong>:</p>
  
  <ol>
  <li>Why is this happening? </li>
  <li>How can I make the first block behave just like the second?</li>
  </ol>