Warum der modale Dialog "Winkelmaterial" wird erweitert, wenn sich Text innerhalb der Spanne befindet?

Question

Ich habe html wie diese

<md-dialog aria-label="Reject" ng-cloak=""> 
    <form name="rejectionForm"> 
    <md-dialog-content> 
     <div class="md-dialog-content"> 
     <h2 class="md-title">Reject confirmation for</h2> 
     <span ng-bind-html="vm.parent.task.label"></span> 
     <textarea placeholder="Please provide a reason for rejection" style="width: 530px; height: 75px"></textarea> 
     </div> 
    </md-dialog-content> 
    <md-dialog-actions layout="row"> 
     <span flex="flex"></span> 
     <md-button ng-click="vm.parent.cancel()">CANCEL</md-button> 
     <md-button ng-click="vm.parent.reject()" class="md-primary md-raised">REJECT</md-button> 
    </md-dialog-actions> 
    </form> 
</md-dialog> 

und modaler Dialog auf 1032px erweitert. Es funktioniert, wenn ich span in div umwandle (oder wenn ich display auf block setze), kann ich div verwenden, aber ich möchte wissen, warum der modale Dialog erweitert wird, wenn es einen Bereich mit Text gibt.

Answer 1

Nach einigen Untersuchungen, so scheint es, die Kombination aus der textareanach der Spanne zu sein, die das Problem verursacht, nicht die span selbst, die durch das Entfernen die textarea beobachtet werden kann - die span verhält sich wie ein div.

Hinzufügen display:block zum textarea löst das Problem - CodePen

<span>wqweqweqweqweqweqweqw eqweqwe qweqweqweqweqweq weqweqweqwe qweqwe </span> 
<div> 
    <textarea placeholder="Please provide a reason for rejection" style="width: 530px; height: 75px; display:block"></textarea> 
</div>