How to fit content to modal in angular?
<p>I am initializing my modal with </p>

<pre><code>var modalInstance = $modal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'search/profile.html',
    controller: 'ProfileController as profileCtrl'
  });
</code></pre>

<p>The CSS associated with it is </p>

<pre><code>.modal-content{
    width: 100%;
    length: 100%;
}
</code></pre>

<p>Unfortunately, for modals with lots of content, the text will overflow and the modal dimensions will not match it (the white part is the modal):</p>

<p><a href="https://i.stack.imgur.com/47aKy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/47aKy.png" alt="The white part is the modal"></a></p>

<p>How can I fit my content to the modal or fit the modal to the content? A hacky solution that I figured out was to just make the modal very large with length: 10000%, but that is not optimal.</p>