У меня есть следующий HTML в материале angularjs:
angular.module('MyApp', ['ngMaterial']);
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<body ng-app="MyApp" ng-cloak>
<div layout="row" style="border: 5px solid red;">
<div layout="column" style="border: 5px solid purple;">
<div layout="row" style="border: 5px solid orange;">
<div layout="column" flex="50" style="border: 5px solid yellow;">
<md-content>
LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfdksahfdlkfdshlsfdhkfdlfdsahfsdlkhfsdlfskdhlfsdkhfsdlkfhdslfdskhflkdslkhsafdhfslkdlsfhkd.
</md-content>
</div>
<div layout="column" flex="50" style="border: 5px solid green;">
Contact
</div>
</div>
</div>
</div>
<br>
<div layout="column" style="border: 5px solid purple;">
<div layout="row" style="border: 5px solid orange;">
<div layout="column" flex="50" style="border: 5px solid yellow;">
<md-content>
LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfd
</md-content>
</div>
<div layout="column" flex="50" style="border: 5px solid green;">
Contact
</div>
</div>
</div>
</body>
</html>
Описание ситуации:
есть два блока, первый содержит мою проблему, второй работает нормально
первый идет строка> столбец> строка> столбец (50%) |столбец (50%)
и второй, который не содержит первую строку, например
column> row> column (50%) |столбец (50%)
первый из столбцов 50% в каждом примере содержит очень длинное слово.
Проблема:
ВВ первом блоке дополнительная строка, кажется, манипулирует макетом таким образом, что правило 50/50 больше не применяется, поскольку блок не делится пополам, а вместо этого полное слово отображается в первом столбце 50%, тогда как во втором блоке это работаетштраф и правило 50/50 аккуратно применено, а полоса прокрутки показана во внутреннем md-контенте (или div).
Вопрос :
- Почемуэто происходит?
- Как заставить первый блок вести себя так же, как второй?