javascript - 如果跨度内有文本，为什么 Angular Material 模式对话框会展开？

Question

我有这样的html

<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>

模态对话框扩展到 1032px。当我将 span 更改为 div(或者如果我将 display 设置为 block )时，它会起作用，我可以使用 div 但我想知道如果存在带文本的 span，为什么模式对话框会展开。

Answer 1

经过一些调查，似乎是 textarea after 引起问题的 span 的组合，而不是 span 本身，可以通过删除 textarea 来观察 - span 的行为类似于 div。

将display:block 添加到textarea 解决了问题- 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>